一、是什么
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