定義：
less是一種動態樣式語言，對css賦予了動態語言的特性，比如變量、繼承、運算、函數，既可以運行在客戶端，也可以運行在服務器端，依賴JavaScript
sass是一種動態語言，屬於縮排語法，比css多出很多功能，比如變量、嵌套、運算、混入、繼承、函數等，更容易閱讀；
sass與scss關系：sass的縮排語法，對於閱讀者很不直觀，因此sass對語法進行改良，sass3就變成scss，與原來的語法兼容，只是用{}取代了原來的縮進
為什么要使用less和sass：
因為css只是單純的屬性描述，並不具有變量、條件語句等，css的特性導致了它難組織和維護。
less與sass相同之處：
1.混入 class中的class
2.參數混入 可以傳遞參數的class
3.嵌套規則 class中嵌套class，從而減少重復的代碼
4.運算 使用數學
5.顏色功能 可以編輯顏色
6.名字空間
7.作用域-局部修改樣式
8.JavaScript賦值，在css中使用JavaScript表達式賦值
區別之處：
1.less基於JavaScript，是在客戶端處理的
很多開發者不會選擇Less因為javaScript引擎需要額外的時間來處理代碼然后輸出修改過的Css到瀏覽器， 【解決：只在開發階段使用Less,一旦開發完成，復制Less輸出的到一個壓縮器，然后用一個單獨的css文件來代替Less文件；另一種方式是使用Less App來編譯和壓縮你的Less文件；這兩種方式都是最小化樣式輸出】
2.sass是基於ruby的，是在服務器端處理的
變量在less和sass中唯一的區別就是，less使用@，sass使用$
3.變量、使用方面的區別
less:
1.變量： 使用@變量名：變量值
2.混合：無參混合，代參混合
3.less的匹配模式，會根據調用時提供的條件只尋找與之匹配的mixins執行，其中@_表示永遠需要執行的部分
4.less中的運算，加減乘除可帶、可不帶單位；顏色運算時，分紅綠藍三組進行運算，組內可進位，組間互不干涉
5.包含了傳進來的所有參數：border：@arguments；
6.less中的嵌套保留了html的代碼結構 1）嵌套默認是后代選擇器，如果需要子代選擇器，則在子代前加>2）.&表示上一層 &：表示上一層的hover事件
sass：
1.使用$變量名：變量值，如果變量需要需要在字符中嵌套，則需使用#加大括號包裹 ：border-#{$left}:10px solid #ccc;
2.會使用單位
3.嵌套：選擇器嵌套 偽類嵌套 屬性嵌套
選擇器嵌套 ul{li{}} 后代 ul{>li{}}子代 &表示上一級 屬性嵌套：屬性名與大括號之間必須有： border：{color：red}
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;
}