一、是什麼
Css 作為一門標記性語言，語法相對簡單，對使用者的要求較低，但同時也帶來一些問題
需要書寫大量看似沒有邏輯的程式碼，不方便維護及擴充套件，不利於複用，尤其對於非前端開發工程師來講，往往會因為缺少 Css 編寫經驗而很難寫出組織良好且易於維護的 Css 程式碼
Css前處理器便是針對上述問題的解決方案
預處理語言
擴充了 Css 語言，增加了諸如變數、混合（mixin）、函式等功能，讓 Css 更易維護、方便
本質上，預處理是Css的超集
包含一套自定義的語法及一個解析器，根據這些語法定義自己的樣式規則，這些規則最終會通過解析器，編譯生成對應的 Css 檔案
二、有哪些
Css預編譯語言在前端裡面有三大優秀的預編處理器，分別是：
- sass
- less
- stylus
sass
2007 年誕生，最早也是最成熟的 Css前處理器，擁有 Ruby 社群的支援和 Compass 這一最強大的 Css框架，目前受 LESS 影響，已經進化到了全面相容 Css 的 Scss
檔案字尾名為.sass與scss，可以嚴格按照 sass 的縮排方式省去大括號和分號
less
2009年出現，受SASS的影響較大，但又使用 Css 的語法，讓大部分開發者和設計師更容易上手，在 Ruby社群之外支持者遠超過 SASS
其缺點是比起 SASS來，可程式設計功能不夠，不過優點是簡單和相容 Css，反過來也影響了 SASS演變到了Scss 的時代
stylus
Stylus是一個Css的預處理框架，2010 年產生，來自 Node.js社群，主要用來給 Node 專案進行 Css 預處理支援
所以Stylus 是一種新型語言，可以建立健壯的、動態的、富有表現力的Css。比較年輕，其本質上做的事情與SASS/LESS等類似
三、區別
雖然各種前處理器功能強大，但使用最多的，還是以下特性：
- 變數（variables）
- 作用域（scope）
- 程式碼混合（ mixins）
- 巢狀（nested rules）
- 程式碼模組化（Modules）
因此，下面就展開這些方面的區別
基本使用
less和scss
.box {
display: block;
}
sass
.box
display: block
stylus
.box
display: block
巢狀
三者的巢狀語法都是一致的，甚至連引用父級選擇器的標記 & 也相同
區別只是 Sass 和 Stylus 可以用沒有大括號的方式書寫
less
.a {
&.b {
color: red;
}
}
變數
變數無疑為 Css 增加了一種有效的複用方式，減少了原來在 Css 中無法避免的重複「硬編碼」
less宣告的變數必須以@開頭，後面緊跟變數名和變數值，而且變數名和變數值需要使用冒號:分隔開
@red: #c00;
strong {
color: @red;
}
sass宣告的變數跟less十分的相似，只是變數名前面使用@開頭
$red: #c00;
strong {
color: $red;
}
stylus宣告的變數沒有任何的限定，可以使用$開頭，結尾的分號;可有可無，但變數與變數值之間需要使用=
在stylus中我們不建議使用@符號開頭宣告變數
red = #c00
strong
color: red
作用域
Css 預編譯器把變數賦予作用域，也就是存在生命週期。就像 js一樣，它會先從區域性作用域查詢變數，依次向上級作用域查詢
sass中不存在全域性變數
$color: black;
.scoped {
$bg: blue;
$color: white;
color: $color;
background-color:$bg;
}
.unscoped {
color:$color;
}
編譯後
.scoped {
color:white;/*是白色*/
background-color:blue;
}
.unscoped {
color:white;/*白色（無全域性變數概念）*/
}
所以，在sass中最好不要定義相同的變數名
less與stylus的作用域跟javascript十分的相似，首先會查詢區域性定義的變數，如果沒有找到，會像冒泡一樣，一級一級往下查詢，直到根為止
@color: black;
.scoped {
@bg: blue;
@color: white;
color: @color;
background-color:@bg;
}
.unscoped {
color:@color;
}
編譯後：
.scoped {
color:white;/*白色（呼叫了區域性變數）*/
background-color:blue;
}
.unscoped {
color:black;/*黑色（呼叫了全域性變數）*/
}
混入
混入（mixin）應該說是前處理器最精髓的功能之一了，簡單點來說，Mixins可以將一部分樣式抽出，作為單獨定義的模組，被很多選擇器重複使用
可以在Mixins中定義變數或者預設引數
在less中，混合的用法是指將定義好的ClassA中引入另一個已經定義的Class，也能夠傳遞引數，引數變數為@宣告
.alert {
font-weight: 700;
}
.highlight(@color: red) {
font-size: 1.2em;
color: @color;
}
.heads-up {
.alert;
.highlight(red);
}
編譯後
.alert {
font-weight: 700;
}
.heads-up {
font-weight: 700;
font-size: 1.2em;
color: red;
}
Sass宣告mixins時需要使用@mixinn，後面緊跟mixin的名，也可以設定引數，引數名為變數$宣告的形式
@mixin large-text {
font: {
family: Arial;
size: 20px;
weight: bold;
}
color: #ff0000;
}
.page-title {
@include large-text;
padding: 4px;
margin-top: 10px;
}
stylus中的混合和前兩款Css前處理器語言的混合略有不同，他可以不使用任何符號，就是直接宣告Mixins名，然後在定義引數和預設值之間用等號（=）來連線
error(borderWidth= 2px) {
border: borderWidth solid #F00;
color: #F00;
}
.generic-error {
padding: 20px;
margin: 4px;
error(); /* 呼叫error mixins */
}
.login-error {
left: 12px;
position: absolute;
top: 20px;
error(5px); /* 呼叫error mixins，並將引數$borderWidth的值指定為5px */
}
程式碼模組化
模組化就是將Css程式碼分成一個個模組
scss、less、stylus三者的使用方法都如下所示
@import './common';
@import './github-markdown';
@import './mixin';
@import './variables';
參考文獻
- https://mp.weixin.qq.com/s/HUEnnJKJDTp8Vlvu2NfUzA