Anasayfa / Web Tasarım / LESS ile daha az CSS

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.

Sponsorlu Bağlantılar

#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

Sponsorlu Bağlantılar

Hakkında Serkan Çataltaş

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

Bir Yorum Yazın