css 預(yù)處理工具，可以將其對(duì)應(yīng)的DSL(領(lǐng)域特定語(yǔ)言)編譯為 css

基本介紹

sass/scss

• SASS 2007年誕生，最早也是最成熟的CSS預(yù)處理器，擁有ruby社區(qū)的支持和compass這一最強(qiáng)大的css框架

• Sass的縮排語(yǔ)法，對(duì)于寫(xiě)慣css前端的web開(kāi)發(fā)者來(lái)說(shuō)很不直觀，sass 不兼容 css 代碼

• Sass3 就變成了Scss(sassy css) 與原來(lái)的語(yǔ)法兼容，只是用{}取代了原來(lái)的縮進(jìn)

• sass 的運(yùn)行 依賴于 ruby 環(huán)境（compass 將 sass 編譯為 css）

• 現(xiàn)在可用 node-sass 來(lái)編譯 sass/scss 文件

  • node-sass 是一套在 node.js 用 LibSass 編 sass/scss 的工具

  • 原始的sass 是用 ruby 編寫(xiě)的，所以需要 ruby 環(huán)境，libSass 是原始sass引擎的一個(gè) c/c++ 接口，使用它編譯sass不依賴于ruby，可以使用其他語(yǔ)言使用libSass

  • 安裝node-sass時(shí)，會(huì)去GitHub 下載一個(gè) .node的文件而這個(gè)文件托管在墻外的服務(wù)器上，所以失敗了node-sass安裝失敗解決方案

• 以 .sass 或 .scss 為文件后綴名稱（現(xiàn)在一般都是用 scss）

less

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

stylus

• Stylus，2010年產(chǎn)生，來(lái)自Node.js社區(qū)，主要用來(lái)給Node項(xiàng)目進(jìn)行CSS預(yù)處理支持，由 TJ大神開(kāi)發(fā)
• 安裝及編譯 npm install stylus -g & stylus src/ (可以加參數(shù)控制編譯后的css排版及壓縮)
• 以 .styl 為文件后綴

使用現(xiàn)狀

• 現(xiàn)在一般都是配合webpack使用這幾種預(yù)處理語(yǔ)言，需要先安裝 編譯器、對(duì)應(yīng) loader，然后再 module.rules 配置其具體規(guī)則

基本語(yǔ)法

• less 基本語(yǔ)法屬于 css 風(fēng)格，而 sass，stylus 利用縮進(jìn)，空格，換行來(lái)減少需要輸入的 字符
• 目前 scss, stylus 也可以支持 css 風(fēng)格，用大括號(hào) 來(lái)書(shū)寫(xiě)

1. 變量符 @ $ 無(wú)變量符號(hào)直接變量名

   less 
   @size: 10px;
   .box {
       width: @size;
   }
   
   scss
   $red: #c00;
   strong {
       color: $red;
   }
   
   stylus
   red = #c00
   strong
       color: red
   
   css 的變量規(guī)范
   /* global scope */
   :root {
       --red: #c00;
   }
   strong {
       color: var(--red);
   }
    web前端開(kāi)發(fā)學(xué)習(xí)Q-q-u-n： 731771211，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法（詳細(xì)的前端項(xiàng)目實(shí)戰(zhàn)教學(xué)視頻，PDF）
   

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

2. 嵌套語(yǔ)法一致，用 & 引用父集 -- 嵌套不建議超過(guò) 4 層

   * less 不支持跳出嵌套
   * sass `@at-root`
   

   @at-root 支持參數(shù)，跳出不同的嵌套
   without： all，表示所有
   without: rule，表示常規(guī)css，rule是默認(rèn)值
   without: media，表示media
   without: support，@support現(xiàn)在使用還不廣泛

   // 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）：預(yù)處理器最精髓的功能，樣式層面上的抽象（相當(dāng)于copy代碼片段）

   • less 直接引入
   • scss 要先聲明 @mixin,使用時(shí) @include

5. 繼承

6. 函數(shù)

7. 邏輯控制：sass, stylus 支持 if else for each while, less 使用 mixin when 處理

• 具體語(yǔ)法看官方文檔

總結(jié)：

• sass 大而全，出現(xiàn)時(shí)間最久，但依賴于 ruby (compass)
• less 可以平滑的從 css 過(guò)度而來(lái)，可以在運(yùn)行時(shí)解析，邏輯功能有些缺失
• stylus 起源 nodejs 社區(qū)，語(yǔ)法靈活， 有一個(gè)官方開(kāi)發(fā)的樣式庫(kù) nib，同樣提供了不少好用的 mixin

Postcss 是什么樣的一種存在？

• PostCSS 既不是預(yù)處理器也不是后處理器，而是一個(gè)平臺(tái)，其本身并不處理任何具體任務(wù)，只有當(dāng)我們?yōu)槠涓郊痈鞣N插件之后，他才具有實(shí)用性

• PostCSS 就像是一個(gè)使能器（enabler），他可以不用完全替代現(xiàn)有的預(yù)處理器或后處理器，而只是作為他們的補(bǔ)充工具。PostCSS的工作機(jī)制主要包含解析代碼、執(zhí)行插件、渲染結(jié)果三部分：

• PostCSS 會(huì)將css代碼解析成包含一系列節(jié)點(diǎn)的抽象語(yǔ)法樹(shù)（AST, Abtract Syntax Tree）。

• PostCSS常用插件 （用這些插件集合其實(shí)已經(jīng)可以代替 三大 css 預(yù)處理器）

  • cssnext, 未來(lái)語(yǔ)法，顏色函數(shù)...
  • postcss-import, 導(dǎo)入文件
  • autoprefixer, 自動(dòng)前綴
  • precss, 集成sass預(yù)處理器，功能強(qiáng)大包括 autoprefixer mixins
  • postcss-mixins, 混合宏，是用類似sass的混合宏，不可與 precss 混用
  • postcss-conditions 邏輯判斷
  • ...

• 目前 Postcss 在一般項(xiàng)目中的用途

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

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

web前端開(kāi)發(fā)學(xué)習(xí)Q-q-u-n： 731771211，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法（詳細(xì)的前端項(xiàng)目實(shí)戰(zhàn)教學(xué)視頻，PDF）
```