CSS Değişkenleri

Renk, boyut, boşluk, font adı veya başka herhangi bir scalar CSS değeri tanımlar.

---

Tanımlama

--isim: değer; söz dizimiyle tanımlanır.

--primary: #2060ff;
--radius: 6px;
--font-base: 16px;
--theme: light;

---

:root'a Yazılma

Bu değişkenler derleme sonucunda final CSS'te :root bloğuna taşınır. Tarayıcıda canlı CSS custom property olarak kalırlar.

--primary: #2060ff;
--radius: 6px;

.btn {
  background: var(--primary);
  border-radius: var(--radius);
}

Üretilen CSS:

:root {
  --primary: #2060ff;
  --radius: 6px;
}

.btn {
  background: var(--primary);
  border-radius: var(--radius);
}

İpucu

var(--primary) doğrudan değere değil, CSS custom property referansına dönüşür. Bu nedenle değer tarayıcıda çalışma zamanında da güncellenebilir.

:root.dark scoped override değildir

:root.dark { --primary: ...; } runtime tema override'ı olarak çalışmaz. LentyStyle :root içindeki --... tanımları extract eder; son değer global :root değerine dönüşür.

--primary: #111;

:root.dark {
  --primary: #eee;
}

Üretilen CSS'te :root.dark görünmez; --primary global :root altında #eee olur. Runtime tema override'ı için html.dark { --primary: #eee; } veya body.dark { --primary: #eee; } gibi normal selector kullanın.

---

Property Değerlerinde Kullanım

--spacing: 8px;
--brand: #2060ff;
--surface: #f4f6fb;

.card {
  padding: var(--spacing);
  background: var(--surface);
  border: 1px solid var(--brand);
}

Üretilen CSS:

:root {
  --spacing: 8px;
  --brand: #2060ff;
  --surface: #f4f6fb;
}

.card {
  padding: var(--spacing);
  background: var(--surface);
  border: 1px solid var(--brand);
}

Selector İçinde Kullanım

Değer değişkeni selector parçası olarak da kullanılabilir. Bu genişleme derleme zamanında yapılır.

--theme: light;
--primary: #2060ff;

.btn-&var(--theme) {
  color: var(--primary);
}

Üretilen CSS:

:root {
  --theme: light;
  --primary: #2060ff;
}

.btn-light {
  color: var(--primary);
}

Not

Selector içindeki var(--x) genişlemesi tarayıcıda dinamik davranmaz. Bu yalnızca derleme anındaki değeri kullanır.

İpucu

&var(...) kullanımında & ile kullanılan değişkenin çıktısı, kullanıldığı selectörde önceki kısım ile birleştirilir.

---

Birden Fazla Değer Değişkeni

--color-brand: #2060ff;
--color-surface: #f4f6fb;
--color-text: #1a1a2e;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;

.hero {
  background: var(--color-surface);
  color: var(--color-text);
  padding: var(--space-lg);
}

.btn {
  background: var(--color-brand);
  color: var(--color-surface);
  padding: var(--space-sm) var(--space-md);
}