Kategori: Javascript & jQuery, HTML & CSS Yorumlar: 6 5687 Okunma
EKİ 11
less.js
Artık CSS kodlarınızı daha hızlı daha kolay yazabileceksiniz. Nasıl mı? less.js ile. Hemen konuya girelim.

styles.less adlı bir dosya oluşturup bunu HTML sayfanıza çağırınız.
<link rel="stylesheet/less" type="text/css" href="styles.less">
Daha sonra http://lesscss.org adresine girip son versiyonunu indirin. HTML sayfanıza indirdiğiniz javascript dosyasını çağırınız.
<script src="http://lesscss.googlecode.com/files/less-1.1.3.min.js" type="text/javascript"></script>
Artık CSS içinde değişkenler kullanabilirsiniz. Örneğin bir rengi birden fazla kullanmanız gerekirse her seferinde renk kodunu yazmak yerine değişkene atayıp kullanabilirsiniz. Daha sonra bir değişiklik yapmak istediğinizde sadece o değişkendeki renk kodunu değiştirmeniz yeterli olacaktır.

Örnek kullanım:
// LESS
@renk = #333;

#header {
    color: @renk;
}
a {
    color: @renk;
}
// CSS çıktısı

#header {
    color: #333;
}
a {
    color: #333;
}
Bir örnek daha göstermek istiyorum. Örneğin background-image'de sürekli link yazmaktan bıktınız. Bir kere yazıp değişken şeklinde kullanabilirsiniz. Örnek:
@url: "http://www.huseyin.at/images";
background-image: url("@{url}/bg.png");
less.js kütüphanesiyle işinizi epey kolaylaştırabilirsiniz. Sorularınız olursa yorum olarak bırakınız.

Oylama: 2.3/5 (Toplam 139 oy)


ozer gul (6 yıl önce)
#1
kolaylık sağladığı bariz.teşekkürler anlatım için..
Hüseyin (6 yıl önce)
#2
Yorumunuz için teşekkür ederim.
astald (5 yıl önce)
#3
Güzel anlatım kolaylık sağlar az çok özellikle background-img linki :) güzel css'de geliştiriyor kendini. Anlatım için teşekkürler.
behruz (5 yıl önce)
#4
Teşekkürler. Yeni bir bilgi oldu. Elinize sağlık
osman (4 yıl önce)
#5
Merhabalar,
less örneğini html ortamında denedim. Ancak sadece mozillada sonuç alabildim. Diğer tarayılar da çalışıyor mu acab? Çalışıyorsa nasıl bir eklenti yapmam gerekecek?

Teşekkürşer
Hueseyin (4 yıl önce)
#6
Merhaba Osman,

diğer tarayıcılarda çalışıp çalışmadığını, çalışmıyorsa neden çalışmadığını araştıracak vaktim olmadığından dolayı sana derleme yöntemini önerebilirim. Bunun için detaylı bilgiye şu sayfadan ulaşabilirsin: http://webmagazin.co/less-csse-heyecan-katin-genel-bakis/

Yorum yap