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

Herkese merhaba, bu yazımda sizlere CSS’de native olarak değişkenlerin kullanımını anlatmak istiyorum. Değişkenlere başlamadan önce sizlere bir sözde sınıftan bahsetmek istiyorum.

:root

:root sözde sınıfı, en üst düzey ebeveyn öğesini temsil eder. Yani bir html sayfada bu html etiketi anlamına geliyor. Fakat css’in kullanım alanlarının artmasıyla örneğin svg ve xml’de kullanılırken, :root sözde sınıfı başka bir öğeyi temsil ediyor olabilir.

Örnek bir değişken tanımlaması

Genelde değişkenleri tanımlarken başına iki tane tire işareti koyulması gerektiği söyleniyor. Ancak ben tiresizde denediğimde çalışıyordu, yine de ayırt edici olması adına başına iki tire koyarak :root içerisinde global bir değişen tanımlayalım.

:root {
    --color: green;
}

Değişkenlerin kullanımı

Değişkenleri kullanırken var() fonksiyonunu kullanacağız. Örneğin yukarıdaki değişkeni bir etiketin rengi olarak belirlemek istersek;

h3 {
    color: var(--color);
}

Local olarak değişken tanımlamak

:root içerisinde biz global olarak değişkenimizi tanımladık. Yani orada tanımlanan değişken sayfanın tamamında kullanılabilirdi. Ancak local olarak belli bir scope’u kapsayacak şekilde oluşturmak istersek, html etiketini seçip değişkeni oluşturuyoruz.

.box {
    --color: blue;
}

Artık .box divinin içinde kullanılan değişken değer olarak maviyi alacak. Çünkü local tanımı bu şekilde yapmış olduk.

jQuery ile Değişkenlerin Değerini Değiştirmek

Genelde jQuery kullandığımız için bundan da bir örnek vermek istiyorum. Örneğin yukarıda oluşturduğumuz renk değişkenini jquery ile dinamik olarak ayarlamak istersek;

<input type="color" id="color">
<script src="jquery.min.js"></script>
<script>
$('#color').on('input', () => {
    $(':root').css('--color', $(this).val());
});
</script>