在介紹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：
【兩種注釋方式】
①//less中的注釋，但這種不會被編譯
②
/*
* 這也是less中的注釋，但是會被編譯
*/
【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中的運算
會將單位也進行運算，使用時需注意最終單位例：10px*10px=100px*px
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循環結構：
//不包含10; @for $i from 1 to 10{} //包含10; @for $i from 1 through 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; }