LESS ile gelişmiş CSS kullanımı


08 Mart 2013     Etiketler: CSS LESS

CSS'e programlama tekniklerini getiren LESS nedir ve nasıl kullanılabilir...


Bu makale ilk olarak F5 Dergi Ağustos-Eylül 2012 sayısında yayınlanmıştır.

LESS ile gelişmiş CSS kullanımı

CSS yazarken hiç değişken kullanabilmek ya da bir kere tanımlanan stil ifadelerini diğer sınıflar içinde yeniden kullanabilmek istediniz mi? Bu tip programlama dillerine benzer kavramları CSS dosyaları içinde de kullanabilmek LESS ile mümkün!

LESS, CSS teknolojisini JavaScript ile geliştiren bir sistemdir. Ve LESS’i kullanmak gerçekten çok kolay! Yapmanız gereken iki şey var:

1. Önce LESS prensipleriyle hazırlanmış CSS dosyanıza bloğunda referans etmek:
<link rel="stylesheet/less" type="text/css" href="stiller.css">

2. Sonra üstteki referanstan sonra gelecek şekilde yine bloğunda LESS JavaScript dosyasına referans eklemek.
<script src="http://lesscss.googlecode.com/files/less-1.3.0.min.js" type="text/javascript"></script>

Yani sayfalarımızın bloğunda aşağıdakine benzer bir ifade mevcut olmalı.

<link rel="stylesheet/less" type="text/css" href="stiller.css">
<script src="http://lesscss.googlecode.com/files/less-1.3.0.min.js" type="text/javascript"></script>
...

ÖNEMLİ NOT: less-1.3.0.min.js dosyasına yapılan referans stiller.css dosyasına yapılan referanstan sonra gelmek zorundadır.

Yukarıda LESS prensipleriyle hazırladığımız stiller.css dosyasının yüklemesinin ardından less-1.3.0.min.js dosyasındaki mantık stiller.css dosyasını derleyecek ve bildiğimiz normal CSS’e çevirecektir. Şimdi LESS CSS dosyalarında kullanabileceğimiz temel unsurları inceleyelim.

Değişkenler ve İşlemler @ sembolünü önek olarak kullanmak suretiyle değişken yaratabilir, ve bu değişkenleri direkt veya birtakım işlemlerden geçirerek kullanabiliriz. Sanıyoruz LESS’i anlamanın en etkin yolu örnekler oluşturup bu örneklerin ürettiği sonuç CSS çıktılarını analiz etmektir.

LESS ortamında tanımlanabilecek değişkenleri ve bunlar üzerine uygulanabilecek işlemleri yakından tanımak için aşağıdaki örneği ve sonuç CSS çıktısını inceleyelim.

LESS CSS

@bazRenk: #4D926F;
@bazCizgi: 1px;
@bazBosluk: 5px;

h1 {
color: @bazRenk;
border: (@bazCizgi * 4) solid (@bazRenk + #222222);
padding: @bazBosluk * 2;
background-color: @bazRenk + #444444;
}

SONUÇ CSS

h1 {
color: #4D926F;
border: 4px solid #6FB491;
padding: 10px;
background-color: #91D6B3;
}

Yeniden kullanılabilen sınıflar LESS ile normal CSS sınıfları yeniden kullanılabilirler.

LESS CSS

.panel {
padding: 20px;
border: 1px dotted #333333;
background-color: #eeeeee;
}

h1 {
color: #111111;
.panel /* panel sınıfını yeniden kullanıyoruz. Son derece faydalı! */
}

SONUÇ CSS

h1 {
color: #111111;
padding: 20px;
border: 1px dotted #333333;
background-color: #EEEEEE;
}

Ayrıca LESS ile parametrik CSS sınıfları yaratabilir ve bunları parametrelerle çağırıp kullanabiliriz.

LESS CSS .panel(@bosluk, @renk) {/* iki parametreli CSS sınıfı. Son derece faydalı! */
padding: @bosluk;
border: 1px dotted #333333;
background-color: @renk;
}
h1 {
color: #fff;
.panel(30px, #222222) /*parametreli panel sınıfını kullanıyoruz*/ }


SONUÇ CSS

h1 {

background-color: #222222;
border: 1px dotted #333333;
color: #FFFFFF;
padding: 30px;
}

Parametrik CSS sınıflarının parametrelerine varsayılacak değerler ekleyerek kullanımını kolaylaştırabiliriz. Yukarıda tanımladığımız .panel sınıfı aşağıdaki gibi de yazılabilir.

.panel(@boşluk: 10px, @renk: #dddddd) {
padding: @bosluk;
border: 1px dotted #333;
background-color: @renk;

}

Şimdi yukarıdaki sınıfı sadece .panel şeklinde de çağırabiliriz ve bu durumda parametreler varsayılan değerleri içerecektir. Parametreli veya parametresiz () karakterleri ile takip edilen sınıflar normal CSS sınıfları olmadığından sadece LESS ortamında çalışacaklardır. Yani normal CSS sınıfları gibi referans edilmemelidirler.

İç içe geçmiş yapılar CSS ile normalde mümkün olmayan iç içe geçmiş, bir nevi hiyerarşik yapılar yazmak LESS ile mümkün olup bize daha az kodla daha çok iş yapmayı mümkün kılıyor.

Aşağıdaki HTML yapısını ele alalım.

<div id="ust">
 
<div class="logo">
   <img src="logo.png">
  </div>




Yorumlar


Bu makaleye ait yorum bulunamadı.

Sizin yorumunuz

Email


Adınız







F5 Dergi © 2017