Açılımı Leaner CSS olan LESS bize CSS yazımını hızlandıracak, daha basit ve kullanışlı hale getirecek bir araçtır.
LESS ile değişken tanımlayabilir, mixinler oluşturabilir, fonksiyon tanımlayıp fonksiyonları kullanabilir, matematiksel hesaplar yapabiliriz.

Öncelikli olarak kurulumdan bahsetmek gerekirse kurulum işlemini  terminal kullanarak yapabilir veya client side çalışacak şekilde manuel kurulum yapabilirsiniz. Ben size manuel kurulumdan bahsedeceğim.. lesscss.org adresine girin ve güncel halini indirin bilgisayarınıza.

Projenize eklemek için head etiketleri arasına ekleyiniz:

<link rel="stylesheet/less" type="text/css" href="css/deneme.less" />
<script src="js/less-1.6.3.min.js" type="text/javascript"></script>

 

Veya js dosyasını CDN üzerinden de çekebilirsiniz:

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.6.3/less.min.js"></script>

 

Kullanımına örnekler vererek start verelim isterseniz ne olduğunu anlamanız için..

Değişken Kullanımı

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

Gördüğünüz gibi değişkenimizi tanımladık ve aşağıda kullandık. Aynı şekilde padding margin vs. işlemlerinde de kullanıp matematiksel işlem yapabilirdik. Burada dikkat etmeniz gereken kısım matematiksel olarak – kullanacaksanız kullanmadan önce mutlaka space basmalısınız aksi halde bitişik olursa tire olarak kabul edecektir.

Mixinler

Mixinler için bir nevi fonksiyon diyebiliriz. Sürekli yazmak zorunda kaldığımız işlemler için bir mixin tanımlayıp bunu o yerlerde basit bir şekilde kullanabiliriz..
Örneğin css3 özelliklerini kullanırken tarayıcı uyumları için -prefix (önekler) kullanıyoruz.. Buda her seferinde o özelliği 3-4 kez tekrar tekrar yazmamız anlamına geliyor. Ancak mixin oluşturursak bir kez mixin’de tanımlıyoruz daha sonra onu kolayca kullanıyoruz.

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

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

Mixinler ile her seferinde satırlarca kod yazmaktan kurtulabiliyorsunuz gördüğünüz gibi.

Yukarıda yazdığımız kodun derlenmiş hali ise aşağıdaki gibidir;

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

Nesting yani iç içe kullanım
Bence LESS ile gelen en önemli özelliklerden birisi de bu. Mesela linklerde kullandığımız hover focus active işlemlerinde alt alta tekrar tekrar aynı şeyleri yazmak zorunda kalıyorduk. LESS de bu işlem çok daha kolay.
Eski teknik ile yazacak olsak:

#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;
}

Şimdi de LESS ile tekrar yazalım:

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

 

Fonksiyon ve Operatör işlemlerin Kullanımı

Fonksiyon tanımlayıp veya tanımlanmış fonksiyonları kullanıp matematiksel işlemler yapabiliriz. Ön tanımlı fonksiyonlar için http://lesscss.org/#reference adresini ziyaret edebilirsiniz.

LESS ile önce yazalım örneğimizi:

@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%);
}

Şimdi bu kodumuzun derlenmiş halini görelim isterseniz:

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

 

Görüldüğü gibi less bize hızlı yazım ve pratiklik getirecektir. Tabi kötü yanlarıda var bir hatanızda tüm dosyanın çalışmaması ve yokmuş gibi tepki vereceği gibi..

Detaylı bilgiye lesscss.org üzerinden erişebilirsiniz..

Herkese iyi çalışmalar..