常見的css預處理器語言有：less，sass，stylus等語言
一、less環境的構建（官網）
1.安裝node，安裝之後敲命令
npm install -g less > lessc styles.less styles.css
2.在瀏覽器環境中使用 Less ：
<link rel="stylesheet/less" type="text/css" href="styles.less" /> <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.10.0-beta/less.min.js" ></script>
這裏需要注意：（測試了好久才弄出來）在瀏覽器環境中使用less必須在線上的環境，否則less是沒有效果的。
二、less語法學習
變量：可以給css的屬性設置變量：
#box{
@h-200:200px;
@w-300:300px;
@red:red;
width:@w-300;
height:@h-200;
}
將一組樣式嵌入到另一組樣式裏：
.style{
border-radius:50%;
color:#ccc;
}
#box{
height:20px;
width:200px;
.style();
}
帶參數使用：
.clac(@width,@height){
width:@width;
height:@height;
color:#ff0;
}
#box{
.clac(200px,200px);
}
嵌套：這裏的嵌套和sass語法是一樣的效果。
#box{
height:20px;
#wrap{
color:#ccc;
}
}
避免編譯：這裏less不認識css的語法所以要加`這個符號不進行編譯。
.box{
width:`"clac(100%-200px)"
}
映射：
#colors() {
primary: blue;
secondary: green;
}
.button {
color: #colors[primary];
border: 1px solid #colors[secondary];
}
導入其他的less文件在less文件中
@import "library"; // library.less
@import "typo.css";
這兩種形式都可以。
三、sass的環境搭建
sass不管採用什麼方式使用，都離不開ruby的環境，所以首先第一步就是安裝ruby（https://rubyinstaller.org/downloads/）
安裝最好是新一點的版本，安裝完成後在命令行輸入ruby -v;出現版本號安裝完成這樣環境就算搭建完成，然後安裝sass和compass，安裝完成輸入sass -v 這樣sass就安裝完成了。
gem install sass
gem install compass
如果要將sass引入項目中，首先要將scss文件編譯成css文件
在命令行輸入（這種方式是監聽文件的改變）
sass --watch style.scss:style.css
將編譯後的css文件引入頁面中
四、sass語法
1.變量的寫法：不同於less使用 @ 來標識變量sass使用 $
$w:20px;
#box{
width:$w;
}
2.sass的指令：
@import
導入其他的sass文件
import "mysass.sass";
或者是
import "mysass";
import還可以導入樣式，和嵌套功能差不多例如：
.border{
border:1px solid #ccc;
}
#box{
import "border";
}
3.屬性嵌套：
.fon{
font:20px{
family:'微軟雅黑'；
weight:bold;
}
}
編譯之後
.font{
font:20px;
font-family:微軟雅黑'；
font-weight:bold;
}
............
五、less和sass的對比：
相同點：
1、都是css的預處理語言
2、都可以將一類屬性引入到另一個選擇器中
3.可以像函數一樣傳遞參數
4、css裏面的顏色，長度等的計算
5、命名空間將樣式分組
6、局部作用域
7、js表達式
不同點：
1、sass要在ruby的環境纔可以，less只是需要的是一個js文件和引入less文件，當然less也可以先使用node進行編譯，之後再引入到頁面中
2.變量的表達不同：less是使用$,sass使用的是@
3、sass是基於服務器端處理的，而less是客戶端處理的
4.sass是可以進行輸出的（4種編譯排版模式nested，expanded，compact，compressed），而less不可以
5、sass是可以支持條件語句的