CSS Variables (Değişken) nedir?

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ğiken Kullanmanın Faydaları

• Tekrar sayısı azaltır.
• Herhangi bir değişiklik yapılacağı zaman, sadece bir yerde yapmak yeterlidir.

Yerel (Local) Değişken Tanımlama

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.

• Eski yöntem ile yapılan örnek.

#baslik {
    color: blue; 
 }
 .alt-baslik {
    color: blue;
 }

• Yeni yöntemle ile yapılan örnek.

 :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 ile CSS Değişkenlerine Erişim Sağlama

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');