Yükleniyor...

CSS Değişkenler

Filtreler pikselleri değiştiriyordu. Custom property'ler (CSS değişkenleri) bakımı kolaylaştırır: :root'ta bir --brand, düğmeler var(--brand) okur — token'ı bir kez değiştirin, arayüz uyar. Cascade ve inherit ederler; adları siz verirsiniz.

Sizin adınız: `--token`

Normal bildirim gibi, ama ad iki tire ile başlar:

:root üzerinde global tokenlar

css

:root {
--brand: #2563eb;
--brand-contrast: #ffffff;
--surface: #f8fafc;
--text: #0f172a;
--radius-md: 0.5rem;
--space-3: 0.75rem;
}

:root belge kökü — site geneli token'lar için. Her seçicide --names; alt öğeler yakında override olmadıkça miras alır.

`var()` ile okuma

Token'lara bağlı birincil düğme

css

.btn-primary {
background: var(--brand);
color: var(--brand-contrast);
border: none;
border-radius: var(--radius-md);
padding: var(--space-3) calc(var(--space-3) * 1.5);
font: inherit;
cursor: pointer;
}

.btn-primary:hover {
background: color-mix(in srgb, var(--brand) 88%, black);
}

Odak: token + var(). Proje genelinde tutarlı adlar.

`var()` içinde yedek

Token yoksa yedek

css

.card {
background: var(--surface, #ffffff);
color: var(--text, #111827);
border-radius: var(--radius-md, 8px);
box-shadow: var(--shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.08));
}

İkinci argüman yedek; var() içindeki ad yazım hatası düzelmez.

Kapsam ve yerel override

📊 Custom property nereye

Kapsam	Seçici	Ne zaman
Global	`:root`	Marka, boşluk, radius
Bileşen	`.card`, `.alert`	Bir kalıbın varsayılanları
Varyant	`.card.is-warning`	Az token değiştir
Runtime	`[data-theme="dark"]`	Palet değiş; aynı `var()` adları

Override'ı yakına koyun. :root herkesi etkiler; bazen yerel --accent yeter.

Kartta yerel accent

Kendi accent'li alt ağaç

css

.card {
--accent: var(--brand);
background: var(--surface);
border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
border-radius: var(--radius-md);
padding: var(--space-3);
}

.card.is-featured {
--accent: #7c3aed;
}

.card__title {
color: var(--accent);
}

.is-featured sadece --accent değiştirir; başlık ve kenarlık var() ile.

Her rengi kopyalamadan tema

Açık varsayılan, koyu data-theme

css

:root {
--surface: #f8fafc;
--text: #0f172a;
--brand: #2563eb;
}

[data-theme="dark"] {
--surface: #0f172a;
--text: #e2e8f0;
--brand: #60a5fa;
}

body {
background: var(--surface);
color: var(--text);
}

JS dataset.theme değiştirebilir — token'lar canlı güncellenir.

Custom property vs Sass `$`

Sass derlemede biter; --token tarayıcı cascade'inde kalır.

Deneyin

:root'ta 5 token; düğme sadece var().
.card --accent + .is-featured.
Token kaldır + fallback.
DevTools'ta [data-theme="dark"].
Tekrarlayan #2563eb → var(--brand).

Sık hatalar

-- olmadan brand:
var() özellik adı olarak
yedeksiz typo

Özet

--name; var(--name, fallback)
:root global; yerel override
Sırada: calc (Modern Toolkit)

🧠 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