Yükleniyor...

CSS Calc ve Matematik Fonksiyonları

Custom property'ler değerlere isim verdi. Matematik fonksiyonları render sırasında hesaplar: sidebar'ı 100%'den düşün, min() ile sınırla, clamp() ile akıcı tipografi — Sass build olmadan.

`calc()` — özellik değerinde aritmetik

İfade calc(...) içinde. Toplama ve çıkarma operatör etrafında boşluk ister:

Main column beside a fixed sidebar

css

:root {
--sidebar-w: 16rem;
--gap: 1rem;
}

.layout {
display: flex;
gap: var(--gap);
}

.sidebar {
flex: 0 0 var(--sidebar-w);
}

.main {
flex: 1 1 auto;
min-width: 0;
/* readable fallback when flex alone is not enough */
max-width: calc(100% - var(--sidebar-w) - var(--gap));
}

%, rem, px, vw ve var() geçerli sonuçta karıştırılabilir.

Boşluklar ve birim kuralları

Geçersiz: calc(100%-2rem). Geçerli: calc(100% - 2rem). *'da bir çarpan sayı olmalı.

Padding from a spacing token

css

.card {
--space: 0.75rem;
padding: var(--space) calc(var(--space) * 2);
margin-block: calc(var(--space) / 2);
}

`min()` ve `max()`

min() en küçüğü; max() en büyüğü seçer:

Column that never overflows the viewport

css

.hero-inner {
width: min(100% - 2rem, 72rem);
margin-inline: auto;
}

.feature-grid {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

`clamp()` — sınırlı akıcı değerler

Sıra: minimum, tercih, maksimum.

Fluid heading between readable bounds

css

:root {
--text-base: clamp(1rem, 0.95rem + 0.35vw, 1.125rem);
--heading-lg: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
}

body {
font-size: var(--text-base);
}

h1 {
font-size: var(--heading-lg);
line-height: 1.2;
}

Fonksiyonlar hesaplanmış değer aşamasında çözülür — :root token'larıyla uyumludur ve cascade'e uyar.

Hangi fonksiyon ne zaman?

📊 Matematik fonksiyonları

Fonksiyon	Fikir	Kullanım
calc()	tek özellik formülü	gutter düş, token ikiye katla
min()	«bundan büyük olma»	genişlik tavanı
max()	«en az…»	minimum boyut
clamp()	min + tercih + max	akıcı font-size

Basit sayfa yüksekliği

Main area at least viewport minus header

css

:root {
--header-h: 4rem;
}

.page {
min-height: max(100vh, calc(100vh - var(--header-h) + 100%));
}

/* simpler pattern most teams use */
.page-simple {
min-height: calc(100vh - var(--header-h));
display: flex;
flex-direction: column;
}

Dene

İki sütun, main'de calc.
Sabit font-size → clamp.
min(100%, 40rem).
Tekrarlayan formülü :root token yap.
calc(100%-1rem) boşlukları düzelt.

Sık hatalar

calc(100%-2rem) boşluksuz
clamp min > max
tavan için max() (min() gerek)
özellik adında calc
iki uzunluk bölme

Özet

calc() — + / - etrafında boşluk
min() / max() — listeden uç değer
clamp() — sınırlı akıcı tipografi
var(--tokens) ile birlikte
Sırada: CSS nesting

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓

Sorular

🎯

70%

Geçmek İçin

♾️

∞

Süre

🔄

∞

Deneme

📝 Talimatlar

Her soruyu dikkatle okuyun
Her soru için en iyi cevabı seçin
Quiz'i istediğiniz kadar tekrar alabilirsiniz
İlerlemeniz üstte gösterilecek

Dil