css 預處理工具，可以將其對應的DSL(領域特定語言)編譯為 css

基本介紹

sass/scss

• SASS 2007年誕生，最早也是最成熟的CSS預處理器，擁有ruby社區的支持和compass這一最強大的css框架
• Sass的縮排語法，對於寫慣css前端的web開發者來説很不直觀，sass 不兼容 css 代碼
• Sass3 就變成了Scss(sassy css) 與原來的語法兼容，只是用{}取代了原來的縮進
• sass 的運行 依賴於 ruby 環境（compass 將 sass 編譯為 css）

• 現在可用 node-sass 來編譯 sass/scss 文件

  • node-sass 是一套在 node.js 用 LibSass 編 sass/scss 的工具
  • 原始的sass 是用 ruby 編寫的，所以需要 ruby 環境，libSass 是原始sass引擎的一個 c/c++ 接口，使用它編譯sass不依賴於ruby，可以使用其他語言使用libSass
  • node-sass
  • ruby-sass與libsass的區別
  • 安裝node-sass時，會去GitHub 下載一個 .node的文件而這個文件託管在牆外的服務器上，所以失敗了 node-sass安裝失敗解決方案
• 以 .sass 或 .scss 為文件後綴名稱（現在一般都是用 scss）

less

• less 2009年出現，受sass的影響較大，但又使用CSS的語法，讓大部分開發者和設計師更容易上手，在ruby社區之外支持者遠超過SASS，其缺點是比起SASS來，可編程功能不夠，不過優點是簡單和兼容CSS，反過來也影響了sass演變到了scss的時代，著名的Twitter Bootstrap就是採用LESS做底層語言的。
• less 可以使用 less.js 在瀏覽器運行時中解析 less 代碼
• 也可以在 node環境中 安裝 less，提前編譯 less 文件 npm install -g less &lessc styles.less styles.css (可以加參數控制編譯後的css排版及壓縮)
• 以 .less 為文件後綴名稱

stylus

• Stylus，2010年產生，來自Node.js社區，主要用來給Node項目進行CSS預處理支持，由 TJ 大神開發
• 安裝及編譯 npm install stylus -g & stylus src/ (可以加參數控制編譯後的css排版及壓縮)
• 以 .styl 為文件後綴

使用現狀

• 現在一般都是配合webpack使用這幾種預處理語言，需要先安裝 編譯器、對應 loader，然後再 module.rules 配置其具體規則

基本語法

• less 基本語法屬於 css 風格，而 sass，stylus 利用縮進，空格，換行來減少需要輸入的 字符
• 目前 scss, stylus 也可以支持 css 風格，用大括號 來書寫

1. 變量符 @ $ 無變量符號直接變量名

   // less 
   @size: 10px;
   .box {
       width: @size;
   }
   
   // scss
   $red: #c00;
   strong {
       color: $red;
   }
   
   // stylus
   red = #c00
   strong
       color: red
   
   css 的變量規範
   /* global scope */
   :root {
       --red: #c00;
   }
   strong {
       color: var(--red);
   }

   * 變量作用域：less 惰性加載，sass，stylus 就近加載

2. 嵌套語法一致，用 & 引用父集 -- 嵌套不建議超過 4 層

   * less 不支持跳出嵌套
   * sass `@at-root`
   ```
   @at-root 支持參數，跳出不同的嵌套 
   without： all，表示所有
   without: rule，表示常規css，rule是默認值
   without: media，表示media
   without: support，@support現在使用還不廣泛
   
   // child1 將跳出 parent 的嵌套
   .parent1{
       color:#f00;
       @at-root .child1 {
           width:200px;
       }
       }
   }
   ```

3. 插值

   // less
   @prefix: ui;
   .@{prefix}-button {
   color: #333;
   }
   
   // sass
   $prefix: ui
   .#{$prefix}-button {
       color: #333;
   }
   
   // stylus
   prefix = ui
   .{prefix}-button
       color #333

4. 混入（mixin）：預處理器最精髓的功能，樣式層面上的抽象（相當於copy代碼片段）

   • less 直接引入

     // 定義mixin，可用 . 或 # 聲明，#key() {} ，也可省略()
     .border() {
         width: 200%; // 控制border的長或者高
         height: 200%;
         position: absolute;
         top: 0;
         left: 0;
         z-index: 0;
         content: "";
         transform: scale(0.5);
         transform-origin: 0 0;
         box-sizing: border-box;
     }
     
     #top-1px(@color:#ccc){
         position: relative;
         &:after {
             border-top: 1px solid @color;
             .border()
         }
     }
     

   • scss 要先聲明 @mixin,使用時 @include
5. 繼承
6. 函數
7. 邏輯控制：sass, stylus 支持 if else for each while, less 使用 mixin when 處理

• 具體語法看官方文檔

總結：

• sass 大而全，出現時間最久，但依賴於 ruby (compass)
• less 可以平滑的從 css 過度而來，可以在運行時解析，邏輯功能有些缺失
• stylus 起源 nodejs 社區，語法靈活， 有一個官方開發的樣式庫 nib，同樣提供了不少好用的 mixin

Postcss 是什麼樣的一種存在？

• PostCSS 既不是預處理器也不是後處理器，而是一個平台，其本身並不處理任何具體任務，只有當我們為其附加各種插件之後，他才具有實用性
• PostCSS 就像是一個使能器（enabler），他可以不用完全替代現有的預處理器或後處理器，而只是作為他們的補充工具。PostCSS的工作機制主要包含解析代碼、執行插件、渲染結果三部分：
• PostCSS 會將css代碼解析成包含一系列節點的抽象語法樹（AST, Abtract Syntax Tree）。

• PostCSS常用插件 （用這些插件集合其實已經可以代替 三大 css 預處理器）

  • cssnext, 未來語法，顏色函數...
  • postcss-import, 導入文件
  • autoprefixer, 自動前綴
  • precss, 集成sass預處理器，功能強大包括 autoprefixer mixins
  • postcss-mixins, 混合宏，是用類似sass的混合宏，不可與 precss 混用
  • postcss-conditions 邏輯判斷
  • ...

• 目前 Postcss 在一般項目中的用途

  • 使用其 autoprefixer 插件，為css 屬性增加前綴
  • 創建 postcss.config.js

  // webpack.config.js
  {
      test: /\.less$/,
      loader: ExtractTextWebpackPlugin.extract([
          {loader: 'css-loader', options: { minimize: true }},
          'postcss-loader', // 要在預處理器處理完之後，在使用 postcss-loader 
          'less-loader',
      ]),
  }
  
  // postcss.config.js
  module.exports = {
      plugins: [
          require('autoprefixer')({
              'browsers': ['> 1%', 'last 2 versions']
          })
      ]
  }

參考

• 知乎
• 三種預處理器對比