CSS'de değişken tanımlamak front-end geliştiricilerine büyük kolaylık sağlar. Diğer programlama diller gibi az tekrar, daha iyi okunabilirlik ve esneklik katar. Global değişken tanımlama yapmak için :root içerisine --değişken-ismi : değeri
yazılarak yapılmaktadır.
Değişkenin etki edeceğini yerleri yerel değişkenle ayarlayabiliriz. Örnek olarak .uyari
sınıfı taşıyan elemanlara ve alt çocuklarına etki etmesini istiyorum, örnek olarak;
.uyari {
--uyari-rengi: #ff6f69;
}
.uyari p {
color: var(--uyari-rengi);
border: 1px solid var(--uyari-rengi);
}
Eğer --uyari-rengi
değişkenini .uyari
sınıfını taşımayan başka bir yerde kullanırsanız çalışmayacaktır.
Aşağıdaki 2 örnekte, CSS'de değişken kullanmanın farkını göstereceğim.
#baslik {
color: blue;
}
.alt-baslik {
color: blue;
}
:root {
--mavi: blue; /* <--- Değişken tanımlama */
}
#baslik {
color: var(--mavi);
}
.alt-baslik{
color: var(--mavi);
}
Yeni yöntemle değişkene tanımlanan renk değiştirilmesi durumunda heryerde değiştirilecektir.
Javascript kullanarak, CSS değişkenlerini erişim sağlamak için 3 satır koda ihtiyaçınız var, Bunlar ise;
var root = document.querySelector(':root');
var rootStyles = getComputedStyle(root);
var mainColor = rootStyles.getPropertyValue('--main-color');
console.log(mainColor);
Eğer CSS değişkenini güncellemek istiyorsak;
root.style.setProperty('--main-color','#88d8b0');