Web Tasarım

LESS ile daha az CSS

less-css
LESS tarafından geliştirilmiş olan 46kb boyutlu less.js dosyası. Stil dosyalarınızı bayağı hafifletici bir etkiye sahip. Örneğin aynı renk kodu temanızın stil dosyasında 20 kere geçiyorsa bu sayıyı 1’e indirmek mümkün. Böylece sadece belirlediğiniz değişkenin renk değeriyle oynanarak 20 yeri birden düzenlemiş olacak.

LESS ile derlenmeden CSS kodlarımız aşağıdaki gibi 10px ve 5px değerinde kenarları yuvarlattık.

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

Bakalım nasıl LESS ile işlem yapılıyor?

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

#header {
.radius;
}
#footer {
.radius(10px);
}

Kaynaklar

http://lesscss.org/
http://lessframework.com/
http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/get-into-less-…
http://twitter.github.com/bootstrap/less.html

Serkan Çataltaş

1987 Yılında Malatya'da doğdu. Netaş'ta çalışmalarına devam etmektedir.

İlgili Makaleler

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir