CSS預處理器和後處理器

css預處理器

一、什麼是css預處理器？

CSS預處理器定義了一種新的語言，其基本思想是，用一種專門的編程語言，爲CSS增加了一些編程的特性，將CSS作爲目標生成文件，然後開發者就只要使用這種語言進行編碼工作。通俗的說，CSS預處理器用一種專門的編程語言，進行Web頁面樣式設計，然後再編譯成正常的CSS文件

二、分類(重點)

Sass（SCSS）、LESS、Stylus、Turbine、Swithch CSS、CSS Cacheer、DT CSS

三、優點

提供CSS層缺失的樣式層複用機制
減少冗餘代碼
提高樣式代碼的可維護性

四、實現原理

取到 DSL 源代碼的分析樹
將含有動態生成相關節點的分析樹轉換爲靜態分析樹
將靜態分析樹轉換爲 CSS 的靜態分析樹
將 CSS 的靜態分析樹轉換爲 CSS 代碼

五、優缺點

優點：語言級邏輯處理，動態特性，改善項目結構
缺點：採用特殊語法，框架耦合度高，複雜度高

六、具體介紹

（一）sass（重點）
完整內容參考這裏

1.sass的安裝

sass基於Ruby語言開發而成，因此安裝sass前需要安裝Ruby。先從官網下載Ruby並安裝。安裝過程中請注意勾選Add Ruby executables to your PATH添加到系統環境變量。安裝完成後需測試安裝有沒有成功,運行CMD輸入以下命令：

ruby -v
//如安裝成功會打印
ruby 2.2.2p95 (2015-04-13 revision 50295) [i386-mingw32]

第二步

gem install sass

安裝完成之後，你應該通過運行下面的命令來確認應用已經正確地安裝到了電腦中：

sass -v
Sass 3.x.x (Selective Steve)

2.編譯sass

//單文件轉換命令
sass input.scss output.css

//單文件監聽命令
sass --watch input.scss:output.css

//如果你有很多的sass文件的目錄，你也可以告訴sass監聽整個目錄：
sass --watch app/sass:public/stylesheets

3.基本用法

變量

SASS允許使用變量，所有變量以$開頭。

　　$blue : #1875e7;　
　　div {
　　　color : $blue;
　　}

如果變量需要鑲嵌在字符串之中，就必須需要寫在#{}之中。

　　$side : left;
　　.rounded {
　　　　border-#{$side}-radius: 5px;
　　}

嵌套

選擇器嵌套

//sass寫法
#main p{
    color:#eee;
    .redbox{
        color:#000000
    }
}
//編譯後
#main p{
    color:#eee;
}
#main p .redbox{
    color:#000000
}

屬性嵌套

//SASS語法，注意在外邊加冒號
.funy{
  font:{
    family:fantasy;
    size:30em;
    weight:bold;
  }
}
//編譯後
.funy{
   font-family:fantasy;
   font-size:30em;
   font-weight:bold;
}

僞類嵌套--------引用父類

//SASS寫法
a{
  background:black;
  &:hover{background:red;}
}
//編譯後
a{
  background:black;
}
a:hover{background:red;}

混合器（混入）

Mixins允許創建一組可以在整個樣式表中重複使用的樣式，而不需要重新創建非語義類。

//使用@mixin命令，定義一個代碼塊。
　　@mixin left {
　　　　float: left;
　　　　margin-left: 10px;
　　}
//使用@include命令，調用這個mixin。
　　div {
　　　　@include left;
　　}

給混合器傳參

可以通過在@include混合器時給混合器傳參，來定製混合器生成的精確樣式。這種方式跟  
JavaScript的function很像：

@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  //&調用父元素
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

//在這裏進行調用
a {
  @include link-colors(blue, red, green);
}

//Sass最終生成的是：

a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }

爲什麼要使用SASS？

它是預處理語言，它爲CSS提供縮進語法（它自己的語法）。
它允許更有效地編寫代碼和易於維護。
它是包含CSS的所有功能的CSS的超集，是一個開源的預處理器，以 Ruby 編碼。
它提供了比平面CSS好的結構格式的文檔樣式。
它使用可重複使用的方法，邏輯語句和一些內置函數，如顏色操作，數學和參數列表。

列出SASS的一些功能？

它是更穩定，強大，與CSS的版本兼容。
它是超集的CSS和基於JavaScript。
它被稱爲CSS的語法糖，這意味着它使用戶更容易閱讀或表達的東西更清楚。
它使用自己的語法並編譯爲可讀的CSS。
你可以在更少的時間內輕鬆地編寫CSS代碼。
它是一個開源的預處理器，被解釋爲CSS。

SASS的優點是什麼？

它允許在編程結構中編寫乾淨的CSS。
它有助於編寫CSS更快。
它是CSS的超集，幫助設計師和開發人員更有效率和快速地工作。
由於Sass兼容所有版本的CSS，我們可以使用任何可用的CSS庫。
可以使用嵌套語法和有用的函數，如顏色操作，數學和其他值。

SASS的缺點是什麼？

開發人員需要時間瞭解此預處理器中存在的新功能。
如果更多的人在同一個網站上工作，那麼將使用相同的預處理器。有些人使用Sass，有些人使用CSS直接編輯文件。因此，它將變得難以與現場工作。
有機會失去瀏覽器的內置元素檢查器的好處。

更多關於sass的問題見這裏

（二）less (瞭解)

詳細內容參考這裏

中文版參考

less的變量處理方式爲懶加載，所有LESS變量的計算，都是以這個變量最後一次被定義的值爲準

less的缺點

很多開發者不會選擇LESS因爲JavaScript引擎需要額外的時間來處理代碼然後輸出修改過的CSS到瀏覽器。

（三）stylus

詳細內容參考這裏

綜上所述，我們對Sass、LESS和Stylus做一個簡單的對比總結：

1.三者都是開源項目；
2.Sass誕生是最早也是最成熟的CSS預處理器，有Ruby社區和Compass支持；Stylus早期服務器Node JS項目，在該社區得到一定支持者；LESS出現於2009年，支持者遠超於Ruby和Node JS社區；
3.Sass和LESS語法較爲嚴謹、嚴密，而Stylus語法相對散漫，其中LESS學習起來更快一些，因爲他更像CSS的標準；
4.Sass和LESS相互影響較大，其中Sass受LESS影響，已經進化到了全面兼容CSS的SCSS；
5.Sass和LESS都有第三方工具提供轉譯，特別是Sass和Compass是絕配；
6.Sass、LESS和Stylus都具有變量、作用域、混合、嵌套、繼承、運算符、顏色函數、導入和註釋等基本特性，而且以“變量”、“混合”、“嵌套”、“繼承”和“顏色函數”稱爲五大基本特性，各自特性實現功能基本相似，只是使用規則上有所不同；
7.Sass和Stylus具有類似於語言處理的能力，比如說條件語句、循環語句等，而LESS需要通過When等關鍵詞模擬這些功能，在這一方面略遜一層；

CSS後處理器（瞭解）

參考文章

CSS 後處理器是對 CSS 進行處理，並最終生成 CSS 的預處理器，它屬於廣義上的 CSS 預處理器。
我們很久以前就在用 CSS 後處理器了，最典型的例子是 CSS 壓縮工具（如 clean-css），只不過以前沒單獨拿出來說過。還有最近比較火的 Autoprefixer，以 Can I Use 上的瀏覽器支持數據爲基礎，自動處理兼容性問題。

//以 Autoprefixer 爲例：

.container {
display: flex;
}
.item {
flex: 1;
}
//將以上 標準 CSS，編譯爲處理了兼容性的 生產環境 CSS：

.container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.item {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}

實現原理

將源代碼做爲 CSS 解析，獲得分析樹
對 CSS 的分析樹進行後處理
將 CSS 的分析樹轉換爲 CSS 代碼

優缺點

優點：使用 CSS 語法，容易進行模塊化，貼近 CSS 的未來標準
缺點：邏輯處理能力有限

CSS 後處理器框架

1.Rework

Rework 是一個高效、簡單、易擴展並且模塊化的 CSS預處理器。
它在 2012 年 9 月才發佈了第一個版本，是 Stylus 的作者 TJ Holowaychuk 大神挖的新坑。

實際上，他採用的是 CSS 後處理器的模型，在其之上有一個模仿 Stylus 風格縮進嵌套的工具 styl，其 CSS 預處理器部分功能是在 Rework 開始工作之前通過 css-whitespace 實現的。
有一些基於 Rework 的樣式庫，參考了 CSS 標準草案或 CSS 標準提案，相當於支持了 CSS 的未來標準，如 rework-vars、rework-font-variant、rework-calc、rework-color-function 等。

是不是聽起來有點暈？這正說明它的模塊化做的非常好，你可以按照實際需要，組合 CSS 框架，比如 Myth。

概括一下 Rework 的特點：

JavaScript 中直接操作 CSS 解析對象，擴展方便
可以自由組合模塊，按需定製 CSS 工具庫
CSS 後處理器的模型決定它的模塊傾向 CSS 未來標準
除服務器端外，也支持在瀏覽器環境運行
Rework 還很年輕，還需要更多的時間積累。

2.PostCSS

PostCSS 是一個 CSS 後處理器框架，允許你通過 JavaScript 對 CSS 進行修改。
它的第一個版本發佈於 2013 年 11 月，是從 Autoprefixer 項目中抽象出的框架。

PostCSS 有以下特點：

它和 Rework 非常相似，但提供了更高級的 API，更易擴展
它可以在現有 Source Map 的基礎上生成新的 Source Map
在原有 CSS 格式的保留方面做的更好，便於開發編輯器插件
比 Rework 更年輕，還只有 Autoprefixer 一個成功案例
其實 Autoprefixer 最初是基於 Rework 做的，但後來作者有更多需求（上面的列表），就造了 PostCSS 這個輪子。

CSS預處理器和後處理器