sass(scss) 、less、 stylus等都是css預處理器
sass：是一種動態樣式語言，比css多出了很多功能（如變量，計算，混入，顏色處理，函數，繼承， 嵌套等），更易閱讀，擴展名.sass
需要嚴格的遵循縮進的語法規則，不帶{}和分號；
h1
color:red;
scss：是sass語法進行改良后的語法，兼容原來的語法，只是將原來的縮進排版方式改成了我們熟悉的{}，擴展名 .scss
h1{
color:red
}
less：Less也是一種動態語言，受sass影響很大，對css賦予了動態語言的特性，如變量，計算，繼承，函數等。Less既可以在客戶端運行（支持IE6+），也可以在服務端運行（借助nodejs）
h1{
color:red
}
stylus：主要是給node項目進行css預處理支持，人氣不如前兩個。擴展名是.styl
同時支持縮進和css常規書寫方式，如下兩種方式都是可以的
h1
color:red
h1{
color:red
}
變量：sass(scss)，less，stylus等讓人們收益的一個重要特性就是變量的引入，我們可以把經常使用的css屬性值，定義成一個變量，然后通過變量名來引用他們。
sass(scss) 變量必須以$開頭，變量和值之間用：隔開，如：
$color:#fff；
h1{
border:1px solid $color
}
less變量必須以@開頭，已經被賦值的變量及其他常亮（如像素，顏色等）都可以參與運算。
@color:#fff;
h1{
border:1px solid @color
}
stylus：可以以$開頭或其他任何字符，但是不能以@開頭。
$color = #ddd;
borderwidth = 1px;
h1{
border:borderwidth solid $color
}
嵌套：
sass(scss)，stylus，less等都支持嵌套
div {
ul{
li{
......
}
}
}
運算符：sass，less，stylus中都支持運算+ - * / %等。
body {
margin: (14px/2);
top: 50px + 100px; //150px 不能寫100% - 10px sass stylus中不兼容 less中會計算成90%
right: 80 * 10%;
}
less中,calc以下兩種方式都可以：
@width:10px;
calc(100% - @width)
calc(~"100% - 10px")
sass中，
cacl(100% - #{$width})
calc(100% - 10px)
stylus中：
calc(100% - 10px);
'calc(100% - %s)' % width;
'calc(100% - %s)' % width;
顏色處理 ： css預處理器一般都會內置一些顏色處理函數用來對顏色值進行處理，如加亮，變暗，顏色梯度等。
sass顏色預處理函數：
lighten($color, 10%); // 在給定顏色基礎上變量10%
darken($color, 10%); // 在給定顏色基礎上變暗10%
saturate($color, 10%); // 在給定顏色基礎上飽和度增加10%
desaturate($color, 10%); // 在給定顏色基礎上飽和度降低10%
grayscale($color); // 將該顏色轉換為對應的灰度顏色
complement($color); // 將該顏色旋轉180°之后的顏色
invert($color); // 和complement類似，獲取顏色旋轉180°之后的顏色，但是不能改變透明度
mix($color1, $color2, 50%); // color1按照50%比例和color2混合
less中顏色預處理函數
lighten(@color, 10%);
darken(@color, 10%);
saturate(@color, 10%);
desaturate(@color, 10%);
spin(@color, 10); // 色相值增加10
spin(@color, -10);
mix(@color1, @color2);
stylus中顏色預處理函數：
lighten(color, 10%)
darken(color, 10%);
saturate(color, 10%);
desaturate(color, 10%);
導入：
@import filepath
繼承：
當我們需要為多個元素定義相同樣式的時候，可以使用繼承
.message{
border:1px solid red;
padding:10px;
}
sass中，通過@extend來實現代碼組合申明，使代碼更加優越整潔
.success{
@extend .message
border-color:green
}
less中：
.success{
.message
border-color:green
}
stylus中：
.success{
@extend .message
}
混入：
sass中可用mixin定義一些代碼片段，且可傳參數，方便日后根據需求調用，比如說處理css3的瀏覽器前綴：
@mixin error($borderwidth:2px){
border:$borderwidth solid red;
}
.message{
padding:4px;
@include error(5px);
}
less中，css的混入寫法：
.error(@borderwidth:2px){
border:@borderwidth solid red;
}
.message{
padding:4px;
.error(5px);
}
stylus中，寫法如下：
error(borderwidth=2px){
border:borderwidth solid red;
}
.message{
padding:4px;
error(5px)
}
高級語法：
1）條件語句
scss中 @if @if...@else if.....@else...
@mixin message($type:''){
@if $type==info{
color:green
} @else if $type==warning{
color:yellow
} @else{
color:red
}
}
.error{
@include message(error)
}
.info{
@include message(info)
}
less中，使用when實現條件語句
.mixin(@type) when(@type=error){
color:red
}
.mixin(@type) when(@type=warning){
color:yellow
}
.error{
.mixin(error)
}
.warning{
.mixin(warning)
}
stylus中，和js語法很相似 直接使用if...else if....else
error(type=''){
if type==error{
color:red;
} else if type==warning{
color:yellow;
}else{
color:green;
}
}
.error{
error(error)
}
.warning{
error(warning)
}
文件引用：
1）vue中導入外部樣式文件，寫法都差不多
區別：
1）編譯環境不一樣：
sass需要Ruby服務，是在服務端支持的
Less需要引入less.js來處理Less代碼輸出css到瀏覽器，也可以在開發環節使用less，編譯成css，直接放到項目中。
stylus需要安裝node，然后安裝最新的stylus包即可。
2）變量符號不一樣:
less是@， scss是$ stylus中的變量沒有任何限制，可以$開頭，結尾的;可有可無，但變量名和變量值之間的=是需要的。stylus變量不要使用@符號開頭。
變量的調用方法是完全相同的。
3）變量的作用域不一樣
sass中，變量分為局部作用域（嵌套規則內定義的變量）和全局作用域（不在嵌套規則內定義的變量）
$width:3px; // 全局作用域
.message{
$width:2px; // 局部作用域
border:$width solid red;
}