CSS Kapsayan Değişkenler

Yerel değişkenle genel değişkeni geçersiz kılmak

Önceki sayfadan anladığımız kadarıyla, genel değişkenler tüm belgede erişilebilir/kullanılabilirken, yerel değişkenler sadece tanımlandığı seçici içinde kullanılabilir.

Önceki sayfadaki örneğe bakın:

örnek

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

Kendi Kendine Deneyin

Bazen, değişkenlerin yalnızca sayfanın belirli bir bölümünde değişmesini isteyebiliriz.

Eğer buton elemanının farklı bir mavi kullanmasını istiyorsak, button seçicisinde --mavi değişkenini yeniden tanımlayabiliriz. Bu seçicide var(--mavi) kullanıldığında, burada tanımlanan yerel --mavi değişken değerini kullanır.

Bölgesel --mavi değişkenin button elemanının genel --mavi değişkenini geçersiz kıldığını görüyoruz:

örnek

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

Kendi Kendine Deneyin

Yeni bir yerel değişken ekle

Eğer bir değişkeni sadece bir yerde kullanıyorsanız, yeni bir yerel değişken de tanıtabiliriz, örneğin:

örnek

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

Kendi Kendine Deneyin

Tarayıcı Desteği

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şkenlerinin değerlerini ekleyin.