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"></script>

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 🙂

Yayınlayan

Tayfun Erbilen

2009'dan beri web işleriyle uğraşan, aynı zamanda amatör müziklede ilgilenen sıradan birisi..

“LESS Kullanımı” üzerine 34 yorum

  1. .ortala
    {
    margin: 0px auto;
    }
    yazmak varken
    .ortala(@yukaridanVeAsagidan : 0px)
    {
    margin: @yukaridanVeAsagidan auto;
    }
    diye daha uzun yazmak + 49KB less.js dosyası eklemekteki fayda nedir anlamış değilim.
    Güzel bir yazı olmuş teşekkürler

    1. Videoyu izlediğinde göreceksin, less.js’yi bir derleyici olmadığında less yazmak için kullanıyoruz. Örneğin ben video’da bir derleyici kullandım sonunda ve hiçbir şey olmadan sadece less kodları yazarak derleyip css kodları haline getirdim.. Yazımı hızlandırdığı gibi, daha eğlenceli kılar.

  2. Neden SASS daha iyi ? SASS’da olupta LESS’te yapamadığımız ne var mesela.. Bende less yazıyorumda bu yüzden sordum..

  3. selam tayfun bey bir şey sormak istiyorum size.. youtube videolarındaki youtube logosunu kaldırmak kullanıcı sözleşmesine aykırı bir durum teşkil ediyor mu siz gerçekleştirmişsiniz bu konuda bilginiz vardır sanırım bende yapabilirim ama bu konudan emin olamadığım için gerçekleştirmedim…

    bilgilendirirseniz sevinirim..

    iyi çalışmalar…

  4. projelerinizi genelde windows bilgisayarınızda mı yoksa mac bilgisayarınızda mı gerçekleştiriyorsunuz ?

    kullanım olarak hangisi favoriniz acaba ?

    bir de bir mac kullanıcısı olarak size master password ile ilgili bilginiz varmı onu sormak istiyorum.. nedir ne işe yarar vs…

  5. Belli bir kullanımda mantıklı ama 🙂 el sürme konusunda düşünceliyim.Belli kodların sabitlenmesinde de iyi ayrıca alt alta eklemek css için daha iyi.Dediğiniz gibi eğlenceli.Paylaşım ve Emek için Teşekkürler.

  6. Dediğiniz gibi eğlenceli bir hal alır kodlama bana çok mantıklı geldi çok teşekkürler.

  7. SASS hakkındaki dersinizide merak ediyorum. Umarım yakın zamanda çekebilirsiniz 🙂

  8. Tayfun nefis bir tecrübe olmuş son 20 projeyi lessle yazdım ama bi kaç bilmediğim olay varmış. Sayende farketmiş olduk. Teşekkürler 😉

  9. tayfun hocam less editör için mac uyumlu hangi programi önerirsin
    birde localhost kurmak için önerebileceğin program varmı ? mac için

  10. hayatımda bu kadar kötü bir anlatış şekli görmedim kusura bakma ama. bu kadar hızlı anlatılmaz. tabler arası geçişi o kadar hızlı yapıyorsun ki nerede ne yaptın anlamak için 2 3 kere geri almak gerekiyor videoyu.
    ayrıca css ve html yazan çoğu kişinin belkide php ve serverlarla bi alakası olmayabilir. o yüzden keşke önce gerekli kurulumları anlatsaydın kısa bir yazı ile. mesela ben uzun bir süre iis üzerinden çalıştırmayı denedim olmadı. çünkü localde chrome desteklemiyor yazdığın şeyleri. firefox ile açılıyor sadece.
    berbat bir anlatım stilin var kusura bakmayın. bu eleştirimi dikkate alıp umarım daha düzgün anlatırsın ilerde…

      1. keşke eleştrimi dikkate alsaydın. kezban ergenler gibi “eheh” diyerek bende laf sokmalıyım kafasına girmeseydin. ben sana gayet yapıcı bir eleştride bulundum. madem böyle güzel bir iş yapıyorsun, senden beklenen cevap “bir dahakine dikkat edeceğim bu bu söylediklerine” tarzında bir şey olmalıydı. ben nerede kendimi ifade etmeye çalışmışım anlamadım bile. neyse hayatta sana da başarılar.

  11. Her anlatım değerlidir bu yüzden teşekkürler. Ahmet tutarlı adlı vatandaşımıza yaptığın ukâla cevap için sizi kınadım.

  12. Merhaba, Çok güzel bir anlatım olmuş teşekkrürler. yalnız SASS arasındaki farklara biraz daha değinseniz çok seviniriz. bu arada, yazıdaki kod alanları bg siyah, yazılar da siyah tayfun bey. Bloklayarak okumak zorunda kaldım. yani pre {background: #272822;} olmuş ama color default #333 tanımlamışsınız okunmuyor 🙂

  13. Less kullanımı anlatmaya çalışan bir çok makale arasında en anlaşılır ve güzel olanı. Gerçekten eline sağlık dostum. Emeğin için teşekkürler.

  14. Merhaba. Bir çok makalelerinizi okumuşum. Bu makale de öncekiler gibi güzel olmuş. Ellerinize ve beyninize sağlık. İyi makaleler.

  15. Web dünyasında bir çok şeyi senden öğrendim less kullanımını da ilk senin yazından okudum, Allah yolunu açık etsin, daha çok başarıl işler ve paylaşımlar…:)

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir