Object Değişkeni

Object değişkeni, anahtar-değer çiftlerini tek bir isim altında gruplar. Söz dizimi tektir; ancak iki farklı amaç için kullanılır:

• CSS property objesi — key'ler CSS property adıdır, var(--obj) ile tam açılım yapılabilir
• Token objesi — key'ler özel token adıdır, her zaman var(--obj.key) ile erişilir

Derleyici her ikisini aynı şekilde işler. Ayrım, key içeriklerinin amacındadır.

---

Tanımlama

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

/* CSS property objesi */
--cardBase: { color: #fff; font-size: 16px; };

/* Token objesi */
--colors: { brand: #2060ff; muted: #6b7280; surface: #f4f6fb; };

---

CSS Property Objesi

Key'ler geçerli CSS property adlarından oluşur. var(--obj) ile nesnenin tüm property'leri çağrıldığı yere açılır.

--cardBase: { color: #1a1a2e; font-size: 16px; padding: 16px; };

.card {
  var(--cardBase);
  margin: 8px;
}

Üretilen CSS:

.card {
  color: #1a1a2e;
  font-size: 16px;
  padding: 16px;
  margin: 8px;
}

Nesnenin yalnızca belirli bir key'ine de erişilebilir:

--cardBase: { color: #1a1a2e; font-size: 16px; padding: 16px; };

.card-compact {
  color: var(--cardBase.color);
  font-size: var(--cardBase.fontSize);
}

Üretilen CSS:

.card-compact {
  color: #1a1a2e;
  font-size: 16px;
}

---

Nesting İçinde Tam Açılım

CSS property objesi nested bloklarla birlikte de kullanılabilir:

--primary: #2060ff;
--cardBase: { color: #fff; font-size: 16px; };

.card {
  var(--cardBase);

  .title {
    color: var(--primary);
  }

  .body {
    font-size: 14px;
  }
}

Üretilen CSS:

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

.card {
  color: #fff;
  font-size: 16px;
}

.card .title {
  color: var(--primary);
}

.card .body {
  font-size: 14px;
}

Bu örnekte var(--cardBase) üst blok içinde tam açılım yapar; nested selector'lar normal şekilde alt selector olarak çıkar.

---

Token Objesi

Key'ler CSS property adı değil, özel token adıdır. Bu tür nesnelerde var(--obj) ile tam açılım yapılmamalıdır — geçersiz CSS üretir. Her zaman var(--obj.key) söz dizimiyle erişilmelidir.

--colors: { brand: #2060ff; muted: #6b7280; surface: #f4f6fb; };

.btn {
  background: var(--colors.brand);
  color: var(--colors.surface);
}

.label {
  color: var(--colors.muted);
}

Üretilen CSS:

.btn {
  background: #2060ff;
  color: #f4f6fb;
}

.label {
  color: #6b7280;
}

Tam açılımdan kaçının

Token objesinde var(--colors) yazılırsa key adları CSS property gibi yorumlanır ve geçersiz CSS üretilir:

/* Yanlış kullanım — var(--colors) ile tam açılım */
.btn {
  brand: #2060ff;
  muted: #6b7280;
  surface: #f4f6fb;
}

Token objelerinde her zaman var(--obj.key) kullanın.

Object değişkenleri selector scope almaz

Object değişkenleri compile-time map'tir. :root.dark { --theme: {...}; } scoped dark-theme override üretmez; son --theme değeri global compile-time değere dönüşür.

--theme: { fg: #111; bg: #fff; };

:root.dark {
  --theme: { fg: #eee; bg: #000; };
}

.card {
  color: var(--theme.fg);
  background: var(--theme.bg);
}

Üretilen CSS'te :root.dark görünmez; .card doğrudan son object değerlerini alır:

.card {
  color: #eee;
  background: #000;
}

Runtime tema için object değişkeni yerine scalar CSS custom property kullanın:

--theme-fg: #111;
--theme-bg: #fff;

html.dark {
  --theme-fg: #eee;
  --theme-bg: #000;
}

---

Key Normalizasyonu

Key erişiminde camelCase ve kebab-case karşılıklı çözümlenir. Tanımda hangi biçimi kullandığınızdan bağımsız olarak her iki erişim biçimi de çalışır.

Tanımda yazılan	Erişim biçimi
font-size	var(--obj.fontSize)
lineHeight	var(--obj.lineHeight)
border-radius	var(--obj.borderRadius)

--typography: { background: #acacac; lineHeight: 1.5; letter-spacing: 0.01em; };

.body-text {
  background: var(--typography.background);
  line-height: var(--typography.lineHeight);
  letter-spacing: var(--typography.letterSpacing);
}

Üretilen CSS:

.body-text {
  background: #acacac;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

---

Numeric Key'ler

Key'ler sayı veya sayı+harf karışımı da olabilir.

--tone: { 100: #f8faff; 200: #dbe9ff; 900: #0a1628; };

.bg-light {
  background: var(--tone.100);
}

.bg-dark {
  background: var(--tone.900);
}

Üretilen CSS:

.bg-light {
  background: #f8faff;
}

.bg-dark {
  background: #0a1628;
}

200a, 2xl gibi alfanümerik key'ler de desteklenir:

--space: { 1: 4px; 2: 8px; 2xl: 24px; };

.gap-2xl {
  gap: var(--space.2xl);
}

Object body içinde @for ile key üretimi de yapılabilir:

--factor: 2;
--range: [1-4];

--spacing: {
  @for(i, var(--range)) {
    ${i}: ${i * var(--factor)}px;
  }
};

.space-2 {
  margin: var(--spacing.2);
}

Üretilen CSS:

.space-2 {
  margin: 4px;
}

Not

Bu destek yalnız object body içindeki @for(...) { key:value; } formu içindir. @if, elseif, else ve @fun object body içinde desteklenmez.

---

Array İçindeki Object Öğelerinde Erişim

Array değişkeni içindeki nesne öğelerine de aynı noktalı erişim söz dizimi geçerlidir.

--breakpoints: [
  { name: sm; size: 640px },
  { name: md; size: 768px }
];

.container {
  max-width: var(--breakpoints[0].size);
}

Üretilen CSS:

.container {
  max-width: 640px;
}

Not

Array değişkenleri ve @for ile nesne dizisi üzerinde döngü kurmak için Array Değişkeni sayfasına gidin.

---

CSS Property Objesi mi, Token Objesi mi?

	CSS Property Objesi	Token Objesi
Key içeriği	CSS property adı	Özel token adı
var(--obj) tam açılım	✓ Geçerli	✗ Geçersiz CSS üretir
var(--obj.key) erişim	✓ Geçerli	✓ Geçerli
Tipik kullanım	Paylaşılan stil seti	Tasarım token'ları (renkler, boşluklar…)