LESS與SASS

LESS和Sass在語法上有些共性，好比下面這些：

• 混入(Mixins)——class中的class；
• 參數混入——能夠傳遞參數的class，就像函數同樣；
• 嵌套規則——Class中嵌套class，從而減小重複的代碼；
• 運算——CSS中用上數學；
• 顏色功能——能夠編輯顏色；
• 名字空間(namespace)——分組樣式，從而能夠被調用；
• 做用域——局部修改樣式；
• JavaScript 賦值——在CSS中使用JavaScript表達式賦值。

LESS和Sass的主要不一樣就是他們的實現方式，LESS是基於JavaScript，因此，是在客戶端處理的。

另外一方面，Sass是基於Ruby的，而後是在服務器端處理的。

 

變量

LESS 文件  

@border-color : #b5bcc7;           
 　　.mythemes tableBorder{
　　border : 1px solid @border-color; 
}

 

SASS 文件

$border-color : #1875e7;
div {
　　color : $blue;
}

 

關於變量在LESS和SASS中的區別就是，LESS用@，SASS用$。

 

混入參數
LESS 文件

   

 .layout(@w,@h,@b,@bgc){
       width: @w;
       height: @h;
       border: @b; 
      background-color: @bgc；
     }     
header{       
　　.layout(1900px,150px,1px solid black,black);
     }

 

SASS 文件

@mixin layout($w,$h,$b,$bgc){
    width:$w;
    height:$h;
    border:$b;
    background-color:$bgc;
}
header{
    @include layout(1900px,150px,1px solid black,black)       
}

 

@mixin的強大之處，在於能夠指定參數和缺省值。

 

@mixin left($value: 10px) {
     　　　　float: left;
     　　　　margin-right: $value;
    　　}

使用的時候，根據須要加入參數：   　　

div {
     　　　　@include left(20px);
     　　}

 

 

 

繼承

SASS容許一個選擇器，繼承另外一個選擇器。好比，現有class1：

.class1 {
     　　　　border: 1px solid #ddd;
     　　} 
//class2要繼承class1，就要使用@extend命令：
.class2 {
     　　　　@extend .class1;
     　　　　font-size:120%;
     　　}

 

運算

SASS在數字上比LESS更專業。它已經能夠換算單位了。SASS能夠處理沒法識別的度量單位並將其輸出。

/* SASS */ 
2in + 3cm + 2pc = 3.514in
 /* LESS */ 
2in + 3cm + 2pc = Error

條件語句與控制

LESS不支持該功能。使用 Sass，你能夠使用if { } else { } 條件語句，以及for { }循環。它甚至支持 and、 or和 not，以及 <、 >、 <=、 >= 和 == 等操做符。

/* Sample Sass "if" statement */
@if lightness($color) > 30% {
    background-color: #000;
} @else {
    background-color: #fff;
}
 
/* Sample Sass "for" loop */
@for $i from 1px to 10px {
    .border-#{i} {
    border: $i solid blue;
    }
}