CSS前處理器和後處理器

阿新 • • 發佈：2019-02-01

css前處理器

一、什麼是css前處理器？

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

二、分類(重點)

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

三、優點

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

四、實現原理

取到 DSL 原始碼的分析樹
將含有動態生成相關節點的分析樹轉換為靜態分析樹
將靜態分析樹轉換為 CSS 的靜態分析樹
將 CSS 的靜態分析樹轉換為 CSS 程式碼

五、優缺點

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

六、具體介紹

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直接編輯檔案。因此，它將變得難以與現場工作。
有機會失去瀏覽器的內建元素檢查器的好處。

（二）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前處理器和後處理器