LESS ile CSS’de Include Özelliği

LESS son gün­lerde gör­dü­ğüm en harika JS betiği diyebilirim!

LESS saye­sinde CSS dos­ya­la­rı­mızda tıpkı PHP’de olduğu gibi inc­lude özel­liği kul­la­na­bi­li­yo­ruz. (Tam ola­rak aynı man­tık değil, ama ona ben­zer bir özel­lik desek daha doğru olur aslında.)

Böy­lece daha az kod yaz­mış olu­yor, ve ile­ride yapa­ca­ğı­mız deği­şik­lik­lerde, CSS dos­ya­sı­nın içinde onlarca kodu deği­şi­tir­mek zorunda kal­mı­yo­ruz. lesscss.org’dan aldı­ğım örnek ile sanı­rım daha anla­şı­lır olacak:

 // LESS
 
@color: #4D926F;
 
#header {
  color: @color;
}
h2 {
  color: @color;
}

/* Derlenmiş CSS */
 
#header {
  color: #4D926F;
}
h2 {
  color: #4D926F;
}

Yuka­rıda da gör­dü­ğü­nüz gibi LESS ile yaz­dı­ğı­mız color (renk) ifa­de­sini, iste­di­ği­miz yere @color şeklinde ekle­ye­bi­li­yo­ruz. Böyle bakınca bel­kide nor­mal­den bir satır daha fazla kod yaz­mış görü­nü­yor ola­bi­li­riz, ama ile­ride yapa­ca­ğı­nız bir deği­şik­liği düşü­nün, tüm renk kod­la­rını bir­çok farklı yer­den değiş­tir­mek mi daha kolay, yoksa tek bir yer­den değiş­tir­mek mi? İşte LESS bize bunu daha kolay hale getiriyor.

Diğer bir­çok örneği ve bu eklen­tiyi lesscss.org’da bula­bi­lir­si­niz.