CSS Değişkenler

CSS Değişkenler

var() fonksiyonu CSS değişkenlerinin değerlerini eklemek için kullanılır.

CSS değişkenleri DOM'yu erişebilir, bu da değişkenleri JavaScript ile değiştirebileceğiniz ve medya sorgularına dayalı olarak değiştirebileceğiniz yerel veya genel kapsamda oluşturabileceğiniz anlamına gelir.

CSS değişkenlerini kullanmanın iyi bir yolu, tasarım renkleridir. Onları değişkenlere koyabilir ve aynı renkleri tekrar tekrar kopyalayıp yapıştırmanıza gerek kalmaz.

Geleneksel yöntem

Aşağıdaki örnek, tarayıcıdaki bazı renkleri tanımlamak için geleneksel bir şekilde (her belirli element için kullanılacak renkleri tanımlamak suretiyle) göstermektedir:

Örnek

body { background-color: #1e90ff; }
h2 { border-bottom: 2px solid #1e90ff; }
.container {
  color: #1e90ff;
  background-color: #ffffff;
  padding: 15px;
}
button {
  background-color: #ffffff;
  color: #1e90ff;
  border: 1px solid #1e90ff;
  padding: 5px;
}

Kendi Kendine Deney

var() fonksiyonunun grameri

var() fonksiyonu CSS değişkenlerinin değerlerini eklemek için kullanılır.

var() fonksiyonunun grameri şu şekildedir:

var(name, value)
Değer Açıklama
name Gerekli. Değişken adı (iki tane çizgi işareti ile başlar).
value Opsiyonel. Değişken bulunmadığında kullanılacak geri bildirim değeri.

Yorum:Değişken adları iki tane çizgi işareti (-) ile başlamalı ve büyük/küçük harfe duyarlı olmalıdır!

var() nasıl çalışır

Öncelikle: CSS değişkenleri genel veya yerel etkili olabilir.

Genel değişkenler tüm belgede erişilebilir/kullanılabilir, yerel değişkenler sadece tanımlandığı seçici içinde kullanılabilir.

Genel etkili değişkenler oluşturmak için :root seçicisinde tanımlayın. :root seçicisi belgenin kök elementini eşleştirir.

Yerel etkili değişkenler oluşturmak için kullanmak istediğiniz seçici içinde tanımlayın.

Aşağıdaki örnek, yukarıdaki örnekle aynıdır, ancak burada var() fonksiyonunu kullanıyoruz.

Öncelikle, iki genel değişken (--mavi ve --beyaz) tanımlıyoruz. Daha sonra, var() fonksiyonunu tarayıcıda tarayıcıdaki değişken değerlerini eklemek için tarayıcıda kullanıyoruz:

Örnek

:root {
  --mavi: #1e90ff;
  --beyaz: #ffffff;
}
body { background-color: var(--mavi); }
h2 { border-bottom: 2px solid var(--blue); }
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}
button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

Kendi Kendine Deney

var() kullanmanın avantajları şunlardır:

  • Kodu daha okunabilir hale getir (daha kolay anlaşılır)
  • Renk değerlerini değiştirmeyi daha kolay hale getir

Mavi ve beyaz renkleri daha yumuşak mavi ve beyaza değiştirmek için sadece iki değişkenin değerlerini değiştirmeniz yeterlidir:

Örnek

:root {
  --mavi: #6495ed;
  --beyaz: #faf0e6;
}
body { background-color: var(--mavi); }
h2 { border-bottom: 2px solid var(--blue); }
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}
button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

Kendi Kendine Deney

Tarayıcı Destek

Tablodaki rakamlar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtmektedir.

Fonksiyon
var() 49.0 15.0 31.0 9.1 36.0

CSS var() Fonksiyonu

Fonksiyon Açıklama
var() CSS Değişkeninin Değerini Ekle