簡介：
.be-extend-class(@width: 10px) {
padding: @width
}
// 使用
.be-extend-class;
.be-extend-class(20px);
CSS是一種標記性語言。如果沒有calc()方法，CSS是不能進行真正意義上的計算的，更不提函數、變量這些了。早期網頁開發還處於刀耕火種的時期，每一個樣式都需要手寫或複製，不能調用。有一個時期，“同一樣式多處調用”的需求產生了“原子樣式”的寫法，類似於：
.center {
text-align: center;
}
很明顯這種寫法還是很累贅。
Sass
Sass是Ruby開發者爲前端開發提供的處理CSS的工具。它爲CSS提供更動態的設定方式，允許編譯、變量、函數……總之，使CSS更動態，也更像一門真正的可編程語言。
- Sass是基於Ruby開發的，所以開發環境首先需要安裝Ruby。
- 瀏覽器中無法編譯Sass，所以要先編譯好css文件，再交給瀏覽器。Sass不能在瀏覽器環境中直接運行。
Less
Less是晚些產生的語言，基於JS進行開發，在Node中進行編譯。所以使用時不需要安裝其他語言，不過要記得先導入less文件，然後導入less.js。提供CDN地址在這裏：
<script src="https://cdn.bootcss.com/less.js/3.0.4/less.js"></script>
<script src="https://cdn.bootcss.com/less.js/3.0.4/less.min.js"></script>
當然Less也提供服務器端的編譯功能。
基本語法：
1. 變量
Sass: $var
Less: @var
兩種語言都會有作用域的問題。一個變量只能在它被定義的代碼塊中使用。重複定義的變量會報錯。
2. 運算賦值：
只要保持單位統一或可相互轉換，就可以進行運算，包括顏色在內：
Sass:
p {
cursor: e + -resize;
}
// 編譯爲
// p {
// cursor: e-resize;
// }
body {
margin: (14px/2);
top: 50px + 100px;
right: $var * 10%;
}
Less:
@base: 5%;
@filler: @base * 2;
@other: @base + @filler;
color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;
@var: 1px + 5;
width: (@var + 5) * 2;
border: (@width * 2) solid black;
3. 嵌套
Sass和Less均允許元素嵌套。如果父子選擇器均用逗號分開，那麼編譯時會按結合律拆開編譯。
Sass和Less指代上層元素均使用&符號。
4. 繼承
Sass中，寫好的選擇器進行集成，需要@extend關鍵字。
Less中，直接寫入即可：.be-extend-class;
5. Mixin
Sass中，需要進行Mixin操作的選擇器需要@mixin關鍵字，選擇器後可以傳入變量和默認值。
@mixin left($value: 10px)
padding: $value
使用時使用@include關鍵字，並可以更新變量：
@include left
@include left(20px)
Less中Mixin和繼承感覺更相似，選擇器在書寫時就留好了變量，直接繼承或更新變量即可：
6. 註釋
兩種語言相同：多行註釋格式可保留，單行註釋格式會在編譯時被刪除。
/* 會被保留的註釋格式 */
// 不保存的註釋格式
略高級的語法：
1. 顏色運算：
CSS預處理器提供一系列顏色函數幫助生成主題系列顏色：
Sass：
lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080 灰度
complement(#cc3) // #33c
Less：
lighten(@color, 10%); // return a color which is 10% *lighter* than @color
darken(@color, 10%); // return a color which is 10% *darker* than @color
saturate(@color, 10%); // return a color 10% *more* saturated than @color
desaturate(@color, 10%); // return a color 10% *less* saturated than @color
fadein(@color, 10%); // return a color 10% *less* transparent than @color
fadeout(@color, 10%); // return a color 10% *more* transparent than @color
fade(@color, 50%); // return @color with 50% transparency
spin(@color, 10); // return a color with a 10 degree larger in hue than @color
spin(@color, -10); // return a color with a 10 degree smaller hue than @color
mix(@color1, @color2); // return a mix of @color1 and @color2
2. 插入文件
兩種語言相同，使用@import關鍵字引入。注意後綴名，可以直接導入css文件。後綴名爲css的文件不會被預處理器處理。
@import "path/filename.scss";
@import "lib.less";
@import "lib.css";
高級語法：
從這裏開始，兩種工具開始有較大的區別。
Sass
在Sass中，需要用Sass自己的一套語言編程：
1. 條件if-else
@if lightness($color) > 30% {
background-color: #000;
} @else {
background-color: #fff;
}
2. 循環
for:
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
while:
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
each:
@each $member in a, b, c, d {
.#{$member} {
background-image: url("/image/#{$member}.jpg");
}
}
3. 自定義函數
需要@function、@return關鍵字。
@function double($n) {
@return $n * 2;
}
#sidebar {
width: double(5px);
}
Less
Less是使用JS作爲編譯環境的，所以它支持JS語法。
1. 字符串插值
@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");
2. 用反引號使用JS語法：
@var: `"hello".toUpperCase() + '!'`;
3. 直接訪問JS環境
@height: `document.body.clientHeight`;