LESS - CSS PreProcessor - Kurulum, Kullanım ve Detaylar

Teknolojinin ilerlemesi, CSS3 yenilikleri ve Response Web kavramı ile ortaya çıkan LESS, CSS'i bir programlama dili gibi kullanmamızı sağlar. CSS içinde değişken tanımlayabilir, fonksiyon yazabilir, özel işlemler (iki renk kodunu birleştir, yardımcı stil yap ve tüm çerçevelere uygulama gibi) yapabiliriz.

LESS ÇEŞİTLERİ

LESS, iki şekilde çalışır.

• Birincisi, sunucu tarafına derleyicisi kurulur ve .less olarak yazdığımız kodlar, derleyici ile .css'e dönüştürülür.
• İkincisi ise, sayfada .less dosyası ve bunu okuyacak bir .js dosyası çağrılır. JS dosyası less içindeki kodları, css'ye dönüştürür. Performans açısından birincisi önerilmektedir.

LESS KURULUM

1. NodeJS / NPM paket yöneticisi ile kurulabilir.
2. Önce CENTOS deposunda bulunmayan bu paket için, EPEL kütüphanesi sistemimize ekliyoruz. ( Bu konudan bağımsız ama kütüphane zenginliğinden tercih ettim. Mutlaka depolarınız içinde EPEL olmalı. )
   
3. Sonra "yum install npm" kurarız.
4. "npm install -g less" : komutu ile lessc'i kurduk. -g parametesi nodejs'nin global anlamını taşır.
   

LESS KULLANIM

Komut satırından : lessc style.less > style.css
("Lessc" derleyicisi ile yazdığımız kodları, CSS'e dönüştürdük.)

LESS DETAY ve ÖRNEKLER

Örnekler "lesscss.org" resmi sitesinden alıntıdır ;

Değişkenler (Variables) : Değişken tanımlabilir.

/* LESS

@color: #4D926F;

#header {
  color: @color;
} 
h2 { 
  color: @color;
}

Compiled CSS */

#header {
 color: #4D926F;
}

h2 {
 color: #4D926F;
} 

Katmanlar (Mixins) : Bir css sınıfını (id,class), başka bir sınıfta kullanabili

/*** 

LESS

.rounded-corners (@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

Compiled CSS 

***/

#header {
 border-radius: 5px;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 -ms-border-radius: 5px;
 -o-border-radius: 5px;
 
}
  
#footer {
 border-radius: 10px;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 -ms-border-radius: 10px;
 -o-border-radius: 10px;
}

İç içe Kurallar (Nested Rules) : CSS kodlarını iç içe yazabiliriz.

/*** 

LESS

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

Compiled CSS 

***/

#header

h1 {
 font-size: 26px;
 font-weight: bold;
}

#header p {
 font-size: 12px;
} 

#header p a {
 text-decoration: none;
}

#header p a:hover {
 border-width: 1px;
}

Fonksiyonlar ve Operasyon (Functions & Operations) : Fonksiyon yazabilir, 4 işlem (çarp,böl,çıkar,topla) yapabiliriz.

/*** 

LESS

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: (@base-color * 3);
  border-left: @the-border;
  border-right: (@the-border * 2);
}
#footer {
  color: (@base-color + #003300);
  border-color: desaturate(@red, 10%);
}
}

Compiled CSS 

***/

#header {
 color: #333;
 border-left: 1px;
 border-right: 2px;
}

#footer {
 color: #114411;
 border-color: #7d2717;
}