Bu yazımızda Css’te değişken tanımlamayı nasıl yapabiliriz onu öğreneceğiz. Öncelikle neden değişken kullanma ihtiyacı duyabiliyoruz ona bakalım.
Örneğin bir tasarım yapıyoruz ve bu tasarımın ana rengi mavi diyelim. Mavi rengi tasarımda birçok yerde kullanılıyor olacaktır ve bu rengi değiştirmek istediğinizde sayfadaki tüm mavi renkleri tek tek değiştirmeniz gerekecek.
Ama bu mavi rengi en başka bir değişkene atayıp her yerde bunu kullanmış olsaydık, sadece değişkenin değerini değiştirdiğimizde her yerde değişmiş olacaktı. İşin özü bu diyebiliriz.
Şimdi de nasıl kullanabileceğimize bakalım.
► Değişken adları iki tire ( — ) ile başlamak zorundadır ve büyük, küçük harf duyarlılığı vardır.
Örneğin,
|
1 2 3 |
--arkaplan-rengi : blue; |
► Tanımlanan değişkenler var fonksiyonu ile kullanılırlar.
Kullanımı şu şekilde,
|
1 2 3 |
var(değişken adı, değişken değeri) |
Burada değişken adı parametresi zorunlu iken değişken değeri parametresi opsiyonel’dir. Yani direk kod yazarken değişken adı ve değerini birlikte verebildiğimiz gibi değişkeni ve değerini daha önceden tanımlayıp kod yazarken sadece değişken adıyla da kullanabiliriz.
Örneğin,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
/* :root alanında değişkenlerimizi tanımlarsak tüm sayfada bu değişkenlere ulaşabiliriz. Değişkenin adını ve değerini burda tanımlayıp, kod yazarken sadece değişken adını kullanıyoruz. */ <style> :root{ --arkaplan-rengi : lightblue; } p{ background-color:var(--arkaplan-rengi); } </style> /* Burda ise değişkenin adını ve değerini kod yazarken kullanıyoruz. İkisi arasındaki en önemli fark, ilk yöntem ile tanımlanan değişkeni her yerde kullanabiliyorken ikinci yöntem ile sadece yazıldığı yerde kullanabiliyoruz. */ <style> p { background-color: var(--arkaplan-rengi,lightblue); } </style> <p>P etiketi.</p> |
Örneğin p, h2 ve h3 etiketleri tanımlayalım ve bunlara background-color, color, padding değerlerini değişkenler ile verelim.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<style> :root{ --arkaplan-rengi : lightblue; --yazi-rengi : #fff; --padding-degeri : 15px; } p{ background-color:var(--arkaplan-rengi); color:var(--yazi-rengi); padding:var(--padding-degeri); } h2{ background-color:var(--arkaplan-rengi); color:var(--yazi-rengi); padding:var(--padding-degeri); } h3{ background-color:var(--arkaplan-rengi); color:var(--yazi-rengi); padding:var(--padding-degeri); } </style> <p>P etiketi.</p> <h2>h2 etiketi.</h2> <h3>h3 etiketi.</h3> |
Normalde değişken kullanmadan bu değerleri değiştirmek istediğimizde tüm etiketlerde tek tek değişiklik yapmamız gerekecekti. Ama şimdi değişken değerlerini değiştirdiğimizde, bu değişkenlerin kullanıldığı her yerde değerleri değişmiş olacak.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<style> :root{ --arkaplan-rengi : yellow; --yazi-rengi : #000; --padding-degeri : 5px; } p{ background-color:var(--arkaplan-rengi); color:var(--yazi-rengi); padding:var(--padding-degeri); } h2{ background-color:var(--arkaplan-rengi); color:var(--yazi-rengi); padding:var(--padding-degeri); } h3{ background-color:var(--arkaplan-rengi); color:var(--yazi-rengi); padding:var(--padding-degeri); } </style> <p>P etiketi.</p> <h2>h2 etiketi.</h2> <h3>h3 etiketi.</h3> |
Gördüğünüz gibi kodların yönetimini biraz daha merkezileştirmiş olduk.
TARAYICI DESTEĞİ
| Fonksiyon | Chrome | IE | Firefox | Safari | Opera |
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
Bu tabloda tarayıcıların var fonksiyonunu hangi versiyon ile birlikte sorunsuz desteklemeye başladığını görebilirsiniz.
Tarayıcı uyumluluğu ile ilgili daha kapsamlı ve güncel bilgi almak isterseniz caniuse sitesini ziyaret edebilirsiniz.
Umarım sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.
