Twitter’ın CSS framework’ü Bootstrap bir süredir .css dışında LESS dosyayısı olarak dağıtılıyor. Dolayısı ile Bootstrap kulllanmasanız bile less dosyaları içinde işinize yarayacak bir sürü şey var. Özellikle mixins.less dosyası içinde işinize yarayabilecek bir sürü mixin var.


Örneğin aşağıdaki CSS3 mixinleri bu dosyadan. Bu mixinler sayesinde her seferinde satırlarca kod yazmaktan kurtulup tarayıcı desteğinden de ödün vermemiş olacaksınız.


PHP- Kodu:
/* Border Radius */
  
.border-radius(@radius5px) {
  -
webkit-border-radius: @radius;
  -
moz-border-radius: @radius;
  
border-radius: @radius;

Örnek;


PHP- Kodu:
#yuvarlak-kenar{
 
.border-radius(3px);
}
/* Derlenmiş Hali */
#yuvarlak-kenar{
  
-webkit-border-radius3px;
  -
moz-border-radius3px;
  
border-radius3px;

PHP- Kodu:
// Drop shadows
  
.box-shadow(@shadow0 1px 3px rgba(0,0,0,.25)) {
  -
webkit-box-shadow: @shadow;
  -
moz-box-shadow: @shadow;
  
box-shadow: @shadow;

PHP- Kodu:
// Transformations
  
.rotate(@degrees) {
  -
webkit-transformrotate(@degrees);
  -
moz-transformrotate(@degrees);
  -
ms-transformrotate(@degrees);
  -
o-transformrotate(@degrees);
  
transformrotate(@degrees);

Bootstrap LESS için tıklayın.


Bunun haricinde LESS Elements oldukça popüler ve sık kullanılabilecek mixinleri içeren bir proje.


Buna ek olarak Paul Mist diye bir arkadaş da responsive.less diye birkaç mixin yaratmış. Özellikle responsive web design ile uğraşıyorsanız. Buradaki bir kaç mixin oldukça zaman kazandırabilir.


Örneğin

px tabanlı padding’i %’ye çevirmek için

Yukarı aşağı 10px, yanlar 15px olan 480px genişliğinde bir eleman için


PHP- Kodu:
#div{
  
.padding(480105105);  

Çıktısı ise yüzde halinde olacak. Bu kadar basit.

PHP- Kodu:
#div {
  
padding2.0833333333333333.1252.0833333333333333.125%;


En son olarak da Semantic Grid System adında proje var. Adından da anlaşılacağı üzere HTML5 ve semantik üzerine kurulu bir grid sistemi. Klasik grid sistemlerinin aksine daha temiz bir layout sağlıyor. Üstüne üstlük de responsive!