CSS özel özellikleri (değişkenleri) nedir?

Question

Accepted Answer

**CSS özel özellikleri** (değişkenleri) değerleri bir kez depolamanız ve yeniden kullanmanız sağlar. Ön işlemci (Sass) değişkenlerinden farklı olarak, bunlar **çalışma zamanında canlı** — basamaklandırılırlar, devralınırlar ve JavaScript veya medya sorguları ile değiştirilebilirler.

```css
:root {                 /* :root = the html element → global scope */
  --color-primary: #3b82f6;
  --spacing: 1rem;
  --radius: 8px;
}

.button {
  background: var(--color-primary);   /* use with var() */
  padding: var(--spacing);
  border-radius: var(--radius);
}
```

## Geri dönüş değerleri

```css
color: var(--text-color, black); /* use black if --text-color isn't defined */
```

## Basamaklandırılırlar ve kapsamlandırılabilir/geçersiz kılınabilirler

```css
.card { --padding: 1rem; }
.card.compact { --padding: 0.5rem; } /* override locally — children using var() update */
```

Devraldıkları için bir üst öğede ayarlanan bir değişken tüm alt öğeler için kullanılabilir ve bir alt ağaçta geçersiz kılınabilir — derlenmiş Sass değişkenlerinin (derlenen) yapamadığı bir şey.

## Öldürücü özellik: çalışma zamanı tema oluşturma

```css
:root { --bg: white; --text: black; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #111; --text: #eee; } /* redefine the SAME vars for dark mode */
}
body { background: var(--bg); color: var(--text); }
```

Birkaç değişkeni yeniden tanımlayarak tüm bir temayı değiştirin — yinelenen kurallar yok. Bunu JS'de de yapabilirsiniz:

```js
document.documentElement.style.setProperty("--color-primary", "#e11d48");
```

Bu, bu değişkeni kullanan her öğeyi anında günceller — derlenmiş Sass değişkenleri ile imkansız.

## Neden önemli

CSS değişkenleri modern **tema oluşturma ve tasarım belirteçlerinin** temelini oluşturur: renkleri/boşlukları bir kez tanımlayın, her yerde yeniden kullanın ve tema (karanlık mod, marka varyantları) çalışma zamanında medya sorguları veya JavaScript aracılığıyla değiştirin.

Sade CSS'ye DRY ve dinamik değerleri getirir — derleme adımı gerekli değildir.