LESS Kullanımı

LESS, CSS yazımınızı hızlandıracak, daha basit ve kullanışlı hale getirecek bir araçtır.
LESS ile değişkenler tanımlayabilir, mixinler oluşturabilir, tanımlı fonksiyonları kullanabilir, matematiksel hesaplar yapabiliriz..

Başka Alternatifler Var mı?

Elbette alternatif mevcut. Örneğin LESS yerine SASS kullanmayı seçebilirsiniz. Ancak ben LESS’i tercih ettim. Kullanımı ve kurulumu çok daha kolay zira.

Nasıl Kullanacağız?

Aslında karışık gibi gözüksede LESS çok basittir. Biz herhangi bir kurulum yapmadan JavaScript dosyasını sayfamıza dahil ederek kullanmaya başlayacağız.
http://lesscss.org/ adresine girerek js dosyasını indirelim. Ya da direk linki alıp kullanabiliriz size kalmış.

<link rel="stylesheet/less" type="text/css" href="assets/styles/custom.less" />
<script src="assets/scripts/less-1.5.0.min.js" type="text/javascript">

Unutmayın, LESS yazmak için bir derleyiciniz var ise, bu js dosyasına da ihtiyacınız yoktur!
Evet artık LESS ile CSS yazmaya başlayabiliriz! ????

Değişkenlerin Kullanımı

Değişken oluşturmak için @ koyup değişken adını yazıyoruz. Değer atamak için : işaretini kullanıyoruz.

@renk: #333444;

Kullanımı ise örneğin şöyledir;

.test {
    color: @renk;
}

Oluşturduğunuz bu değişkeni istediğiniz herhangi bir yerde başında @ işareti koyarak adıyla kullanabilirsiniz.

Mixin Kullanımı

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.

.display-inlinei7 {
    display: inline-block;
    #display: inline;
    zoom: 1;
}

.test {
   color: red;
   .display-inlinei7;
}

Bu işlemin css çıktısı şöyle olacaktır;

.test {
   color: red;
    display: inline-block;
    #display: inline;
    zoom: 1;
}

Parametreli Mixin Kullanımı

Oluşturduğumuz mixinlere parametrede gönderebiliyoruz.. Örneğin bir mixin oluşturalım;

.absolute (@left, @top: 10px){
    position: absolute;
    top: @top;
    left: @left;
}

.test {
    .absolute(100px, 25px);
}

Burada left ve top adında 2 parametre gönderdik.. Eğer : koyup değer girersek parametre gelmezse atadığımız değeri kullanır mixin..
Bu işlemin css çıktısı şöyle olacaktır;

.test {
    position: absolute;
    top: 25px;
    left: 100px;
}

Eğlenceli gelmeye başladı değil mi? Emin olun, CSS yazmayı çok daha kolay hale getirdiği gibi aynı zamanda eğlenceli hale de getiriyor ????

İçiçe Kurallar

Bir nesneye css uyguladıktan sonra o nesne içindeki başka bir nesneye css uygulamak için tekrar tekrar alt alta seçmek gerekir. Ya da hover, focus, active gibi işlemler için yeniden tanımlamak gerekir.
Ancak LESS’de içiçe yazım kuralı vardır ve bu benim en sevdiklerim arasındadır ????

Şimdi öncelikle normal bir menü örneğini css ile yapalım..

.menu {
    overflow: hidden;
    border: 1px solid #ddd;
}
.menu ul li {
    float: left;
    border-right: 1px solid #ddd;
}
.menu ul li a {
    display: block;
    padding: 10px;
    color: #111;
}
.menu ul li a:hover {
    background: #eee;
}

Şimdi ise aynı örneği LESS kullanarak yazalım.

@renk: #111;
.menu {
    overflow: hidden;
    border: 1px solid lighten(@renk, 80%);
    ul li {
      float: left;
      border-right: 1px solid lighten(@renk, 80%);
      a {
        display: block;
        padding: 10px;
        color: @renk;
        &:hover {
          background: lighten(@renk, 90%);
        }
      }
    }
}

Gördüğünüz gibi içiçe yazdık ve çok daha kullanışlı oldu. Burada sadece 1 ana renk tanımladık. Daha sonra LESS’in bize sunduğu lighten() fonksiyonu sayesinde açık hallerini elde edebildik.
Ayrıca hover için parent (üst nesneyi) & ile seçtiğimizi unutmayın.

Fonksiyonların Kullanımı

LESS’in sunduğu bir çok fonksiyon var ve çoğu da zamanla aklımızda kalacak ve sıklıkla kullanacağımız fonksiyonlar olacak.
http://lesscss.org/#reference

Örnek bir fonksiyon kullanımını görelim.. Gerçi zaten yukarıda lighten() fonksiyonunu kullandık ama olsun!

.test {
   background: fadeout(red, 60%);
}

Burada kırmızı rengin %60 daha şeffaf halini arkaplan rengi olarak kullandık.

İşlemler

Matematiksel işlemler içinde LESS’i kullanabiliriz.. En basit örnekleri;

.test {
    padding: 5px * 2;
}

ya da

.test {
    width: (100% - 6) / 2;
}

tabi önemli olan bunları doğru zamanda doğru yerde kullanmak ????