【less和sass的區別，你瞭解多少？】

在介紹less和sass的區別以前，咱們先來了解一下他們的定義：

1、Less、Sass/Scss是什麼?

一、Less：

是一種動態樣式語言. 對CSS賦予了動態語言的特性，如變量、繼承、運算、函數。

Less 既能夠在客戶端上運行 (支持IE 6+, Webkit, Firefox)，也可在服務端運行。

 

二、Sass：

是一種動態樣式語言，Sass語法屬於縮排語法，

比css比多出好些功能(如變量、嵌套、運算,混入(Mixin)、繼承、顏色處理，函數等)，更容易閱讀。

 

Sass與Scss是什麼關係?

Sass的縮排語法，對於寫慣css前端的web開發者來講很不直觀，也不能將css代碼加入到Sass裏面，所以sass語法進行了改良，Sass 3就變成了Scss(sassy css)。與原來的語法兼容，只是用{}取代了原來的縮進。

 

2、less和sass的相同之處

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

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

 

3、less和sass的區別

 

Less和Sass的主要不一樣就是他們的實現方式。

Less是基於JavaScript，是在客戶端處理的。
Sass是基於Ruby的，是在服務器端處理的。

關於變量在Less和Sass中的惟一區別就是Less用@，Sass用$。

 

一、Less：

【兩種註釋方式】
①//less中的註釋，但這種不會被編譯

②

/*
 * 這也是less中的註釋，可是會被編譯
 */

 

【less中的變量】
一、聲明變量:@變量名:變量值;
使用變量: @變量名

>>>less中變量的類型：
①數字類 1 10px
②字符串：無引號字符串 red ;有引號字符串 "haha"
③顏色類：red #000000 rgb()
④值列表類型：用逗號和空格分隔 10px solid red
eg:

 1 @length: 100px;
 2 @color:red;
 3 @opa:0.5;
 4 @border:10px solid red;
 5 .borderRadius(@brWidth:10px){
 6 border-radius: @brWidth;
 7 }
 8 .setMargin(lefts,@width){
 9 margin-left:@width;
10 }

>>>變量使用原則：
屢次頻繁出現的值、須要修改的值，設爲變量

二、混合(MiXins)
①無參混合
聲明：.name{} 選擇器中調用：.name;

②代參混合
無默認值聲明：.name(@param){} 調用：.name(parValue);
有默認值聲明：.name(@param:value){}
調用：.name(parValue); parValue可省
>>>若是聲明時，參數沒有默認值，則調用時必須賦值，不然報錯！
>>>無參混合，會在css中編譯除同名的class選擇器，有參的不會

三、less的匹配模式：使用混合進行匹配，相似於if結構
聲明：
.name(條件一，參數){}
.name(條件二，參數){}
.name(@_,參數){}
調用：.name(條件值，參數值);

匹配規則：根據調用時提供的條件值去尋找與之匹配的"MiXins"執行，其中@_表示永遠須要執行的部分

四、less中的運算
+ - * / 可帶、可不帶單位
顏色運算時，紅綠藍分三組計算，組內可進位，組間互不干涉

五、包含了傳進來的全部參數：border:@arguments;
六、less中的嵌套：保留HTML中的代碼結構
①嵌套默認是後代選擇器，若是須要子代選擇器，則在子代前加>
②.&表示上一層 &:表示上一層的hover事件
eg:

 1 section{
 2 p{
 3 color: red;
 4 background-color: yellowgreen;
 5 text-align: center;
 6 }
 7 ul{
 8 padding: 0px;
 9 list-style: none;
10 li{
11 float: left;
12 margin: 10px;
13 width: 100px;
14 text-align: center;
15 border: @border;
16 &:hover{
17 background-color: yellow;
18 }
19 }

二、Sass：

一、Sass中的變量
使用 $變量名：變量值，聲明變量；

若是變量須要在字符串中嵌套，則需使用#加大括號包裹；
border-#{$left}:10px solid blue;

二、Sass中的運算，會將單位也進行運算，使用時需注意最終單位
例：10px*10px=100px*px

三、sass中的嵌套：選擇器嵌套，屬性嵌套，僞類嵌套

選擇器嵌套 ul{ li{} } 後代
           ul{ >li{} } 子代
&:表示上一層 div{ ul{ li{ &=="div ul li" } } }

屬性嵌套：屬性名與大括號之間必須有:
例如:border:{color:red;}

僞類嵌套：ul{li{ &:hover{ "ul li:hover" } } }

四、混合宏、繼承、佔位符

①混合宏：聲明：@mixin name($param:value){}
調用：@include name(value);
>>>聲明時，能夠有參，能夠無參；可帶默認值，也可不帶；可是，調用時，必須符合聲明規範。同less
>>>優勢；能夠傳參，不會生成同名class；
>>>缺點：會將混合宏中的代碼，copy到對應的選擇器中，產生冗餘代碼！

②繼承：聲明：.class{} 調用：@extend .class;
>>>優勢：繼承的相同代碼，會提取到並集選擇器中，減小冗餘代碼
>>>缺點：沒法進行傳參，會在css中，生成一個同名class

③佔位符：聲明：&class{} 調用：@extend %class;
>>>優勢：繼承相同代碼，會提早到並集選擇器；不會生成同名的class選擇器
>>>缺點：沒法進行傳參

綜上所述：當須要傳遞參數時，用混合宏；當有現成的class時用繼承；當不須要參數，也不須要class時，用佔位符

五、if條件結構：
@if 條件{}
@else{}

六、for循環結構：
@for $i from 1 to 10{} 不包含10;
@for $i from 1 through 10{} 包含10;

七、while循環結構：
$j:1;
@while $j<10{
.while#{$j}{
border:#{$j}px solid red;
}
$j:$j+1;
}

八、each循環遍歷
@each item in a,b,c,d{
//item表示每一項
}

九、函數：
@function func($length){
$length1:$length*5;
@return $length1;
}
調用：func(10px);
十、使用...將傳進來的全部參數，接收到一個變量中
@mixin bordeRadius($param1...){
//使用...將傳進來的全部參數，接收到一個變量中
border-radius:$param1;
-webkit-border-radius:$param1;
}

 

好啦~~~less和sass的區別今天就先介紹到這裏~~~