Konu: CSS’e yeni soluk, LESS’e giriş

Aslında CSS ön-işleyicileri (preprocessor) veya derleyicileri ile tanışmam yeni değil. Bir iki senedir varlıklarından haberdarım ve zaman zaman da inceledim. Ama en başından beri – belki de bir çok geliştirici gibi – bunları kullanmaya direndim.

Öncelikle SASS. Bence SASS’ın büyük problemi kullanıcı dostu olmamadı ve Ruby gerektirmesi. SASS kullanmak için ilk önce bilgisayarınıza Ruby kurmanız gerekiyor ve .less dosyalarını komut satırından teker teker derlemeniz gerekiyor. Bana biraz fazla iş gibi gözüktü. Ne de olsa en başından beri CSS’lerimi kendim bir tekst editöründe yazıyorum. CSS’i oturup yazmak varken eden bu fazladan işlere katlanayım ki? Diğer bir kişisel neden ise Ruby’den pek hoşlanmamam. Peki o zaman LESS‘e gelelim, LESS Javascript tabanlı ama uzun süre o da pek ilgimi çekmedi.


İkinci bir neden ise bir çok geliştiricinin programcı olmaması. Programcı olmayan CSS guruları için değişkenler, mixinler ve diğer programlama yapıları pek rahat olmayabilir.


Peki ne değişti. Öncelikle web’in kendisi değişti. Artık fluid, responsive design gibi kelimeler var. CSS dosyaları daha kalabalık ve karmaşık. İkinci bir neden ise LESS’in ve programlarının gelişmesi. Kişisel bir olay da Twitter’ın Bootstrap’inin (ve daha sonra HTML5 Boilerplate’in) içinde bir .less dosyası bulunmasıydı. Bunları görünce konuya biraz daha eğilmeye karar verdim. İçine girdikçe de LESS son derece kullanışlı ve dahası vazgeçilmez bir araç olmaya başladı.


Öncelikle LESS için sayfanın içine gömülmüş bir Javascript derleyici veya Node.js gibi sunucu tarafında bir derleyici de kullanabilirsiniz. Fakat sayfa yüklenirken fazladan hem LESS javascript dosyasını yüklemek hem de bunu işlemek performans açısından çok iyi bir seçim değil. Öte yandan Node.JS kendi sunucunuz halinde pek de rahat bulunabilecek bri kurulum değil. Bu da bizleri LESS programlarına getiriyor. Bunlardan biri SimpleLESS.

Mac, Windows ve Linux sürümleri mevcut. Benim şu anda kullandığım bir Mac programı olan LESS.app da diğer bir seçenek. İki program da odukça temiz tasarımlı ve kullanışlılar ve buna ek olarak derlenen CSS dosyalarını minimize de edebiliyorlar.

LESS ile kısa bir tanışma

Peki nedir bu LESS (ve CSS preprocessorlar) ve nasıl çalışır. Ufak bir giriş yapalım. Temel olarak LESS dosyasında CSS’e benzer bir dilde komutlar yazıyorsunuz ve LESS bunu sizin için CSS’e çeviriyor.

Değişkenler;


Değişkenler sık kullanılan özellikleri tek bir yerden yönetmenize izin verirler. Örneğin;

PHP- Kodu:

// LESS

@color: #4D926F;
@font-serif: 'Times New Roman', Georgia, serif;
@kalin-border: 3px solid black;

#header { color: @color; }

h2 { color: @color; }

p{
border: @kalin-border;
font-family: @font-serif
}

/* Derlenmiş CSS dosyası ise */

#header{color: #4D926F}
h2{color: #4D926F}

p{
  border: 3px solid black;
  font-family: 'Times New Roman', Georgia, serif;
} 


Mixin’ler

Mixin’ler kısaca bir class’ın özelliklerini başka bir class içinde kullanmanıza olanak verirler. Örneğin;

PHP- Kodu:

// LESS
.yuvarlak-kenar (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#header {
  .yuvarlak-kenar;
}

#footer {
  .yuvarlak-kenar(10px);
}

// Derlenmiş CSS

#header {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}

#footer {
border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
} 


İçiçe Kurallar (Nested Rules)

PHP- Kodu:

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

/* Derlenmiş 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;
} 


Fonksiyon ve İşlemler

PHP- Kodu:

// LESS

@cerceve: 1px;
@taban-rengi: #111;
@kirmizi:     #842210;

#header {
  color: @taban-rengi * 3;
  border-left: @taban-rengi;
  border-right: @cerceve * 2;
}
#footer { 
  color: @taban-rengi + #003300;
  border-color: desaturate(@kirmizi, 10%);
}

/* Derlenmiş CSS */

#header {
  color: #333;
  border-left: 1px;
  border-right: 2px;
}
#footer { 
  color: #114411;
  border-color: #7d2717;
} 


Buraya kadar LESS’in temel olarak nasıl çalıştığını ve kısaca ne işe yaradığını görmüş oldunuz. Hemen denemeye başlayabilirsiniz. Eminim bir kere kullanmaya başladıktan sonra sizinde hayatınızı kolaylaştıracak.