Ana Sayfa/Blog/CSS Değişkenleri (Custom Properties): Rehber
CSS

CSS Değişkenleri (Custom Properties): Rehber

·7 dk okuma

CSS Değişkenleri (resmi adıyla Custom Properties), stil sayfalarınızda yeniden kullanılabilir değerler tanımlamanızı sağlayan güçlü bir özelliktir. Sass veya Less gibi ön işlemcilere ihtiyaç duymadan, tarayıcının doğal olarak desteklediği bu mekanizma, özellikle tema yönetimi ve tutarlı tasarım sistemleri oluşturmak için vazgeçilmezdir.

CSS Değişkeni Nedir?

CSS değişkeni, -- ön ekiyle tanımlanan ve var() fonksiyonuyla kullanılan özel bir CSS özelliğidir:

:root {
  --primary-color: #6366f1;
  --spacing-md: 1rem;
  --font-main: 'Outfit', sans-serif;
}

.button {
  background-color: var(--primary-color);
  padding: var(--spacing-md);
  font-family: var(--font-main);
}

Değişkenler CSS'in cascade (kademeli) yapısına uyar, kalıtım yoluyla alt elemanlara aktarılır ve medya sorguları içinde değiştirilebilir.

:root ile Global Tanımlama

:root seçicisi, HTML belgesinin kök elemanını (<html>) hedefler. Değişkenleri burada tanımlamak, tüm sayfada erişilebilir olmalarını sağlar:

:root {
  --color-bg: #ffffff;
  --color-text: #1a1a2e;
  --color-accent: #6366f1;
  --radius-sm: 4px;
  --radius-md: 8px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
}

Bir değişkeni belirli bir bileşen kapsamında da tanımlayabilirsiniz. Bu durumda yalnızca o eleman ve alt elemanları için geçerli olur:

.card {
  --card-padding: 1.5rem;
  padding: var(--card-padding);
}

.card-compact {
  --card-padding: 0.75rem;
}

Fallback (Yedek) Değerler

var() fonksiyonu, değişken tanımlı değilse kullanılacak bir yedek değer kabul eder:

/* Eğer --accent-color tanımlı değilse #6366f1 kullanılır */
color: var(--accent-color, #6366f1);

/* İç içe fallback */
color: var(--theme-color, var(--accent-color, blue));

Bu özellik, bileşen kütüphaneleri oluştururken son derece faydalıdır. Kullanıcı bir değişken tanımlamasa bile bileşen düzgün çalışır.

Cascade ve Kalıtım

CSS değişkenleri, normal CSS özelliklerinin cascade kurallarına uyar. Daha spesifik bir seçicide tanımlanan değer, genel tanımın üzerine yazar:

:root {
  --btn-bg: #6366f1;
}

.danger {
  --btn-bg: #ef4444;
}

.button {
  background: var(--btn-bg);
  /* .danger içindeki .button kırmızı olur */
}

JavaScript ile Dinamik Değişiklikler

CSS değişkenlerinin en güçlü yanlarından biri, JavaScript ile çalışma zamanında değiştirilebilmeleridir:

// Değişken okuma
const root = document.documentElement;
const value = getComputedStyle(root).getPropertyValue('--primary-color');

// Değişken yazma
root.style.setProperty('--primary-color', '#ec4899');

// Belirli bir eleman için değiştirme
element.style.setProperty('--card-padding', '2rem');

Bu özellik, kullanıcı tercihlerine göre temayı değiştirmek, animasyonları kontrol etmek veya dinamik düzenler oluşturmak için idealdir.

Dark Mode Teması Oluşturma

CSS değişkenleri ile dark mode uygulamak son derece kolaydır:

:root {
  --color-bg: #ffffff;
  --color-surface: #f8fafc;
  --color-text: #1a1a2e;
  --color-text-secondary: #64748b;
  --color-border: #e2e8f0;
}

[data-theme="dark"] {
  --color-bg: #0f172a;
  --color-surface: #1e293b;
  --color-text: #f1f5f9;
  --color-text-secondary: #94a3b8;
  --color-border: #334155;
}

/* prefers-color-scheme ile otomatik */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #0f172a;
    --color-surface: #1e293b;
    --color-text: #f1f5f9;
  }
}

Tüm bileşenleriniz bu değişkenleri kullandığında, tema değişikliği tek bir yerde yapılır ve tüm site anında güncellenir.

Pratik İpuçları

CSS renkleriyle çalışırken SiteScripti'nin Gradient Oluşturucu ve Renk Paleti araçlarını kullanarak değişkenleriniz için mükemmel renk kombinasyonları oluşturabilirsiniz.

Bu konuyla ilgili araçlarımızı da deneyin: Gradient Oluşturucu, Box Shadow Oluşturucu, CSS Animasyon Oluşturucu

İlgili Yazılar

← Tüm Yazılar