Css Değişken Tanımlama

Merhaba Arkadaşlar,
Bu makalede 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,

► Tanımlanan değişkenler var fonksiyonu ile kullanılırlar.Kullanımı şu şekilde,

Burda 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,

Örneğin <p>, <h2> ve <h3> etiketleri tanımlayalım ve bunlara background-color, color, padding değerlerini değişkenler ile verelim.

css-dersleri-degisken-tanimlama-1 

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.

css-dersleri-degisken-tanimlama-2

Gördüğünüz gibi kodların yönetimini biraz daha merkezileştirmiş olduk.

Tarayıcı Desteği

FonksiyonChromeIEFirefoxSafariOpera
var()49.015.031.09.136.0

Bu resimde 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.

Yeni bir makalede görüşmek üzere.

Önceki : Css Dersleri 35 – Ölçü Birimleri

Sonraki : Css Dersleri 37 – Responsive Web Tasarım Nedir?

Leave a Reply

TASARIMLARINIZDA KULLANABİLECEĞİNİZ TAM 150 FARKLI RENK PALETİRenkleri Göster
+ +