CSS Geçersiz Kılma Değişkenleri
Global Değişkeni Yerel Değişkenle Geçersiz Kıl
Önceki sayfadan, global değişkenlere tüm belge üzerinden erişilebileceğini/kullanılabileceğini, yerel değişkenlerin ise yalnızca bildirildiği seçicinin içinde kullanılabileceğini öğrendik.
Önceki sayfadaki örneğe bakın:
Örnek
:root {
--blue: #1e90ff;
--white: #ffffff;
}
body {
background-color: var(--blue);
}
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;
}
Bazen değişkenlerin sadece sayfanın belirli bir bölümünde değişmesini isteriz.
Düğme öğeleri için farklı bir mavi renk istediğimizi varsayalım. Ardından, düğme seçicinin içindeki --blue değişkenini yeniden bildirebiliriz. Bu seçicinin içinde var(--blue) kullandığımızda, burada belirtilen yerel --blue değişken değerini kullanacaktır.
Yerel --blue değişkeninin, düğme öğeleri için global --blue değişkenini geçersiz kılacağını görüyoruz:
Örnek
:root {
--blue: #1e90ff;
--white: #ffffff;
}
body {
background-color: var(--blue);
}
h2 {
border-bottom: 2px solid var(--blue);
}
.container {
color: var(--blue);
background-color: var(--white);
padding:
15px;
}
button {
--blue: #0000ff; /* local variable will
override global */
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}
Yeni Yerel Değişken Ekle
Bir değişken yalnızca tek bir yerde kullanılacaksa, bunun gibi yeni bir yerel değişken de bildirebilirdik:
Örnek
:root {
--blue: #1e90ff;
--white: #ffffff;
}
body {
background-color: var(--blue);
}
h2 {
border-bottom: 2px solid var(--blue);
}
.container {
color: var(--blue);
background-color: var(--white);
padding:
15px;
}
button {
--button-blue: #0000ff; /* new local
variable */
background-color: var(--white);
color: var(--button-blue);
border: 1px solid var(--button-blue);
padding: 5px;
}
Tarayıcı Desteği
Tablodaki sayılar,
var()
işlevi tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
Function | |||||
---|---|---|---|---|---|
var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS var() İşlevi
Property | Description |
---|---|
var() | Inserts the value of a CSS variable |