【less和sass的區別，你了解多少？】
在介紹less和sass的區別之前，我們先來了解一下他們的定義：
一、Less、Sass/Scss是什么?
1、Less：
是一種動態樣式語言. 對CSS賦予了動態語言的特性，如變量、繼承、運算、函數。
Less 既可以在客戶端上運行 (支持IE 6+, Webkit, Firefox)，也可在服務端運行。
2、Sass：
是一種動態樣式語言，Sass語法屬於縮排語法，
比css比多出好些功能(如變量、嵌套、運算,混入(Mixin)、繼承、顏色處理，函數等)，更容易閱讀。
Sass與Scss是什么關系?
Sass的縮排語法，對於寫慣css前端的web開發者來說很不直觀，也不能將css代碼加入到Sass里面，因此sass語法進行了改良，Sass 3就變成了Scss(sassy css)。與原來的語法兼容，只是用{}取代了原來的縮進。
二、less和sass的相同之處
Less和Sass在語法上有些共性，比如下面這些：
1、混入(Mixins)——class中的class；
2、參數混入——可以傳遞參數的class，就像函數一樣；
3、嵌套規則——Class中嵌套class，從而減少重復的代碼；
4、運算——CSS中用上數學；
5、顏色功能——可以編輯顏色；
6、名字空間(namespace)——分組樣式，從而可以被調用；
7、作用域——局部修改樣式；
8、JavaScript 賦值——在CSS中使用JavaScript表達式賦值。
三、less和sass的區別
Less和Sass的主要不同就是他們的實現方式。
Less是基於JavaScript，是在客戶端處理的。
Sass是基於Ruby的，是在服務器端處理的。
關於變量在Less和Sass中的唯一區別就是Less用@，Sass用$。
1、Less：
【兩種注釋方式】
(1)、聲明變量:@變量名:變量值;
使用變量: @變量名
>>>less中變量的類型：
①數字類 1 10px
②字符串：無引號字符串 red ;有引號字符串 “haha”
③顏色類：red #000000 rgb()
④值列表類型：用逗號和空格分隔 10px solid red
@length: 100px;
@color:red;
@opa:0.5;
@border:10px solid red;
.borderRadius(@brWidth:10px){
border-radius: @brWidth;
}
.setMargin(lefts,@width){
margin-left:@width;
}
>>>變量使用原則：
多次頻繁出現的值、需要修改的值，設為變量
(2)、混合(MiXins)
①無參混合
聲明：.name{} 選擇器中調用：.name;
②代參混合
無默認值聲明：.name(@param){} 調用：.name(parValue);
有默認值聲明：.name(@param:value){}
調用：.name(parValue); parValue可省
>>>如果聲明時，參數沒有默認值，則調用時必須賦值，否則報錯！
>>>無參混合，會在css中編譯除同名的class選擇器，有參的不會
(3)、less的匹配模式：使用混合進行匹配，類似於if結構
聲明：
.name(條件一，參數){}
.name(條件二，參數){}
.name(@_,參數){}
調用：.name(條件值，參數值);
匹配規則：根據調用時提供的條件值去尋找與之匹配的"MiXins"執行，其中@_表示永遠需要執行的部分
(4)、less中的運算
+ - * / 可帶、可不帶單位
顏色運算時，紅綠藍分三組計算，組內可進位，組間互不干涉
(5)、包含了傳進來的所有參數：border:@arguments;
(6)、less中的嵌套：保留HTML中的代碼結構
①嵌套默認是后代選擇器，如果需要子代選擇器，則在子代前加>
②.&表示上一層 &:表示上一層的hover事件
section{
p{
color: red;
background-color: yellowgreen;
text-align: center;
}
ul{
padding: 0px;
list-style: none;
li{
float: left;
margin: 10px;
width: 100px;
text-align: center;
border: @border;
&:hover{
background-color: yellow;
}
}
2、Sass：
(1)、Sass中的變量
使用 $變量名：變量值，聲明變量；
如果變量需要在字符串中嵌套，則需使用#加大括號包裹；
border-#{$left}:10px solid blue;
(2)、Sass中的運算，會將單位也進行運算，使用時需注意最終單位
例：10px10px=100pxpx
(3)、sass中的嵌套：選擇器嵌套，屬性嵌套，偽類嵌套
選擇器嵌套
ul{ li{} } 后代
ul{ >li{} } 子代
&:表示上一層 div{ ul{ li{ &==“div ul li” } } }
屬性嵌套：屬性名與大括號之間必須有:
例如:border:{color:red;}
偽類嵌套：ul{li{ &:hover{ “ul li:hover” } } }
(4)、混合宏、繼承、占位符
①混合宏：聲明：@mixin name($param:value){}
調用：@include name(value);
>>>聲明時，可以有參，可以無參；可帶默認值，也可不帶；但是，調用時，必須符合聲明規范。同less
>>>優點；可以傳參，不會生成同名class；
>>>缺點：會將混合宏中的代碼，copy到對應的選擇器中，產生冗余代碼！
②繼承：聲明：.class{} 調用：@extend .class;
>>>優點：繼承的相同代碼，會提取到並集選擇器中，減少冗余代碼
>>>缺點：無法進行傳參，會在css中，生成一個同名class
③占位符：聲明：&class{} 調用：@extend %class;
>>>優點：繼承相同代碼，會提前到並集選擇器；不會生成同名的class選擇器
>>>缺點：無法進行傳參
綜上所述：當需要傳遞參數時，用混合宏；當有現成的class時用繼承；當不需要參數，也不需要class時，用占位符
(5)、if條件結構：
@if 條件{}
@else{}
(6)、for循環結構：
@for $i from 1 to 10{} 不包含10;
@for $i from 1 through 10{} 包含10;
(7)、while循環結構：
$j:1;
@while $j<10{
.while#{$j}{
border:#{$j}px solid red;
}
$j:$j+1;
}
(8)、each循環遍歷
@each item in a,b,c,d{
//item表示每一項
}
(9)、函數：
@function func($length){
$length1:$length*5;
@return $length1;
}
調用：func(10px);
(10)、使用…將傳進來的所有參數，接收到一個變量中
@mixin bordeRadius($param1...){
//使用...將傳進來的所有參數，接收到一個變量中
border-radius:$param1;
-webkit-border-radius:$param1;
}
好啦 less和sass的區別今天就先介紹到這里
今日事，今日畢！我愛敲代碼，代碼使我快樂~