Devam Et
Logo
Blog

CSS Global ve Local Değişken Oluşturma

CSS'de beklediğinizden çok daha fazla işinize yarayacak olan, themeforest tarzı profesyonel tema sitelerinin aradığı en büyük özellik olan değişken kullanımı bu yazımızda ele alıyoruz. 

Eğer projelerinizde web site tasarımlarınızı kendiniz yapıyorsanız veya web site tasarımı yapıp pazarlıyorsanız, CSS kodlarınızda mutlaka kullanmanız gereken bir özellikten bahsedeceğiz. Eğer themeforest veya benzeri profesyonel tema satışı yapan sitelerden tema satın aldıysanız mutlaka CSS dosyalarında değişken tanımlandığına şahit olmuşsunuzdur. Belki bir zamanlar bana olduğu gibi baktığınz halde o kodların ne anlama geldiğini anlamadınız:) 

Değişken tanımlama özelliği tüm programlama dillerinde olduğu CSS'de hayat kurtaran bir özellik olarak göze çarpıyor. Düşünün ki bir projede hem navbar (üst menü) içerisindeki liste elemanlarının font büyüklüğüne 16px veriyorsunuz, hem de sidebar'ınızda bulunan kategoriler sekmenindeki liste elemanlarının font büyüklüğüne. İlerleyen günlerde bu font büyüklüğünü değiştirmek isterseniz iki ayrı yerde de değiştirmek zorunda kalacaksınız. (Tabi eğer sadece 2 elemanda bunu kullanıyorsanız. Düşünsenize onlarca farklı yerde aynı font büyüklüğünü kullanıyorsunuz. Bu işin içinden çıkılmaz bir hal alacaktır.) 

İşte burada değişken tanımlama özelliği bizim derdimize derman oluyor.

Değişkenlerimizi Nasıl Tanımlayacağız ?

Öncelikle değişkenlerimizi CSS içerisinde :root kümesi içerisinde tanımlayacağız. Çünkü; bir CSS dosyası yüklendiğinde ilk önce dikkat edilen küme :root kümesidir. Bundan sonra html, body ve bizim tanımladığımız sınıf isimlerinin CSS kodları işleme alınır.

Yazılı olmayan bir CSS standardına göre ise bu :root kümesi, CSS dosyasının en üstünde tanımlanır. Şimdi örneklerimize yavaş yavaş başlayalım. 

Örneğin elimizde aşağıdaki gibi bir HTML kodumuz olsun;

<h1 class="anaBaslik">Kod Aktüel</h1>
<h1 class="altBaslik">Yazılım & Tasarım Hizmetleri</h1>

Bu kodlara ilişkin CSS kodlarımız da aşağıdaki gibi olsun;

:root{
  --fontSizeAnaBaslik:50px;
  --fontSizeAltBaslik:28px;
}
.anaBaslik{
  font-size:var(--fontSizeAnaBaslik);
}
.altBaslik{
  font-size:var(--fontSizeAltBaslik);
}

Bu kodları birleştirdiğimiz takdirde elde edeceğimiz ekran görüntüsü şöyle olacaktır;

Bu kodları istediğiniz şekilde, istediğiniz sınıflara aktarabilirsiniz. Bu tanımlama işlemini @media etiketleri içerisine yazıp responsive tasarımlarınıza da uygulayabilirsiniz.

Buna da bir örnek vermek gerekirse, bu kez HTML kodlarımız aşağıdaki gibi olsun;

<div class="box">
  Kod Aktüel Yazılım & Tasarım Hizmetleri
</div>

 CSS kodlarımızı da şöyle değiştirelim;

:root{
  --bgColor:red;
  --boxWidth:100%;
}
.box{
  text-align:center;
  font-weight:bold;
  padding:20px;
  background:var(--bgColor);
}
@media(max-width:750px){
  :root{
    --bgColor:blue;
  }
}

Burada default olarak --bgColor değişkenimize red değerini atadık. Dolayısıyla div'imizin arka plan rengi kırmızı oldu. Media kümesiyle 750px'in altındaki ekran boyutlarında değişkenimizin değerini blue olarak değiştirerek div'imizin arka plan rengini maviye çevirdik. Kodlarımıza ait ekran çıktısını aşağıda görebilirsiniz.

Author

Muhammed Yusuf TAŞKESENLİGİL

Hakkında: Hakkında: 2015 Haziran ayında KTÜ Bilgisayar Mühendisliği bölümünden mezun oldum. Yaklaşık 4 yıldır web teknolojileri üzerinde çalışıyorum. HTML, CSS, JavaScript ve PHP alanlarında proje geliştiriyorum. Teknolojiyi seven ve hayatının her alanında kullanan biriyim.

One Signal ile Web Bildirimi Gönderme Önceki Yazı
HTML5 ile Bildirim (Notification) Gönderme Sonraki Yazı

0 Yorum

    Henüz hiç yorum eklenmemiş!

Bir Yorumda Sen Bırak