Css’de Değişken Kullanımı

Merhabalar dostlar, bugün anlatmak istediğim konu Css’de değişken kullanmak. Css yazarken aynı rengi yada özelliği sürekli kullanırız ve bu rengi yada özelliği değiştirmek istediğimizde ise hepsini tek tek değiştirerek zaman kaybediyoruz.

Css’de değişken kullanımı yaparak bu zaman kaybını önleyebilir daha mantıklı ve anlaşılır bir kod yazmak mümkün olacaktır.

Css’de Değişken Tanımlamak

Css’de değişken tanımlamadan önce yapmamız gerek :root kod bloğunu oluşturmaktır. Oluşturduğumuz değişkenleri bu kod bloğu içerisine yazacağız. Aşağıdaki kod bloğunu inceleyelim.

:root {
    --renk: #FF0000;
}

Yukarıda Css dosyamızın içerisinde :root kod bloğu’nu oluşturduk ve bu kod bloğu’nun içerisinde renk adında bir değişken tanımladık ve değer verdik.

Değişken tanımlamak için — çift tire komutunu belirtmek yeterli olacaktır. :Root içerisine oluşturduğumuz değişkenlerimizi Css dosyamızda global olarak kullanabilmekteyiz.

Css’de Değişken Kullanımı

Yukarıda ki kodumuzda değişkenimizi oluşturduk ve değer atamasını yaptık. Şimdi bu değişkenimizi kullanalım. Oluşturduğumuz değişkenler var() içerisinde kullanılır. Aşağıdaki örnek kodumuzu inceleyelim.

a {
    color: var(--renk);
}

Evet var() parantez içerisine değişkenimizi yazarak oluşturduğumuz değişkeni kullandık. İşte bu kadar basit.

Şimdi bir diğer konumuz olan kapsama geçelim.

Css’de Değişkenlerin Kapsamı

:root kod bloğu içerisine oluşturduğumuz değişkenler tüm etiketler içerisinde ortak olarak kullanılabilir. Ama bir etiket içerisinde oluşturulan değişkenler sadece o kod bloğu içerisinde geçerli olacaktır. Örnek bir kod ile açıklayalım.

:root {
    --renk: #FF0000;
}

a {
    color: var(--renk);
}

p {
    --ana-renk: #000000;
    color: var(--renk);
}

a tagı içerisinde kullandığımız değişken değerini :root içerisinden aldı dolayısıyla global değişken.

Ama p tag içerisindeki değişkenimiz aynı kod bloğunda yer alan değişkeni kullandı dolayısıyla yerel değişkendir. Bu değişken sadece p tagı içerisinde çalışacaktır.

JavaScript İle Css Değişkenlerine Erişmek

JavaScript ile Css değişkenlerimize erişim oldukça basittir. Aşağıdaki örnek kodu inceleyerek daha iyi anlayalım.

element.style.getPropertyValue("--renk");

Yukarıda --renk adında oluşturduğumuz Css değişkenine JavaScript ile erişim sağladık.

İşte bu kadar basit. Bu şekilde daha anlaşılır ve daha az kod yazarak Css dosyaları oluşturup kod hamallığın dan kurtulabiliriz.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Shares