我們先問(wèn)自己一個(gè)問(wèn)題為什么需要預(yù)處理器？
答案是不言而喻的，那就是 CSS 本身有些缺點(diǎn)：

• 語(yǔ)法不夠強(qiáng)大，不能夠嵌套書(shū)寫(xiě)，導(dǎo)致項(xiàng)目中樣式邏輯一點(diǎn)也不清楚。
• 沒(méi)有變量和邏輯上的復(fù)用機(jī)制，當(dāng)有需要復(fù)用代碼的時(shí)候，只能重復(fù)書(shū)寫(xiě)樣式，導(dǎo)致難以維護(hù)。

為了處理上面的問(wèn)題，CSS 預(yù)處理器誕生了，比較流行的就是 Sass、Less、Stylus 他們共同的特點(diǎn)是：

• 變量：提高代碼的復(fù)用性。
  Sass：使用「$」對(duì)變量進(jìn)行聲明，變量名和變量值使用冒號(hào)進(jìn)行分割
  Less：使用「@」對(duì)變量進(jìn)行聲明
  Stylus：直接變量名和變量值之間『等號(hào)』連接。
• 作用域
  Sass：它的方式是三者中最差的，不存在全局變量的概念
  Stylus 和 Less：它的方式和 js 比較相似，逐級(jí)往上查找變量
• 嵌套：對(duì)于 css 來(lái)說(shuō)，有嵌套的寫(xiě)法表達(dá)邏輯無(wú)疑是更完美的。
  三者在這處的處理都是一樣的，使用「&」表示父元素

開(kāi)始。

項(xiàng)目是在一個(gè)簡(jiǎn)單的 React 環(huán)境里面做的，目錄結(jié)構(gòu)如下：

┣? webpack.config.js ： webapck的配置文件
┣? package.json：依賴(lài)包的身份證
┣? main.js ：主入口文件
┣? index.html：首頁(yè)
┣? App.js：App 組件
┗? style:放置樣式表
    ┣? scss.scss
    ┣? stylus.styl
    ┗? less.less

App.js 文件引入樣式表：

import React, { Component } from "react";
import "./style/less.less";
// import "./style/scss.scss";
// import "./style/stylus.styl";
export default class App extends Component {
    render() {
        return (
            <div>

            </div>
        )
    }
}

一、Less

在 Webpack 中使用：

安裝插件：

npm install --save less less-loader

配置 webpack.config.js 文件：

module.exports = {
    module: {
        rules: [{
            test: /\.[le|c]ss$/i,
            use: [
                // Creates `style` nodes from JS strings
                'style-loader',
                // Translates CSS into CommonJS
                'css-loader',
                // Compiles Sass to CSS
                'less-loader',
            ]
        }],
    }
};

在 style 文件里面新建 less.less ，并輸入內(nèi)容：

@bgc: green;

div {
    width:100px;
    height:100px;
    background-color: @bgc;
}

npm run dev 運(yùn)行程序，打開(kāi)http://127.0.0.1:8080/

lessc less.less -o css.css

就能把 less.less 文件轉(zhuǎn)成 css 格式的樣式表。

二、Sass

在 Webpack 中使用：

SCSS 是 Sass 3 引入新的語(yǔ)法，其語(yǔ)法完全兼容 CSS3，并且繼承了 Sass 的強(qiáng)大功能。也就是說(shuō)，任何標(biāo)準(zhǔn)的 CSS3 樣式表都是具有相同語(yǔ)義的有效的 SCSS 文件。另外，SCSS 還能識(shí)別大部分 CSS hacks（一些 CSS 小技巧）和特定于瀏覽器的語(yǔ)法。所以 Scss 就當(dāng)相于 Sass 的 CSS。Sass 的運(yùn)行環(huán)境是 ruby ，但我們的開(kāi)發(fā)環(huán)境一般都是基于 node 開(kāi)發(fā)，所以我們需要安裝 node-sass 提供環(huán)境，安裝 sass-loader 翻譯 sass 和 scss 到 css。

安裝環(huán)境：

npm install sass-loader node-sass --save

配置 webpack.conifg.js

module.exports = {
    module: {
        rules: [{
            test: /\.s[ac]ss$/i,
            use: [
                // Creates `style` nodes from JS strings
                'style-loader',
                // Translates CSS into CommonJS
                'css-loader',
                // Compiles Sass to CSS
                'sass-loader',
            ]
        }],
    }
};

在 style 文件里面新建 scss.scss ，并輸入內(nèi)容：

$body-color: red;

div {
    width:100px;
    height:100px;
    background-color: $body-color;
}

npm run dev 運(yùn)行程序，打開(kāi)http://127.0.0.1:8080/

三、Stylus

在 Webpack 中使用：

安裝：

npm install --save stylus stylus-loader

配置 webpack.config.js

module: {
    rules: [{
        test: /\.styl$/,
        use: [{
            loader: "style-loader" // creates style nodes from JS strings
        }, {
            loader: "css-loader" // translates CSS into CommonJS
        }, {
            loader: "stylus-loader" // Compiles Sass to CSS
        }]
    }]
}

在 style 文件里面新建 stylus.styl ，并輸入內(nèi)容：

bgc = blue

div
    width 100px
    height 100px
    background-color bgc

Stylus 不需要寫(xiě)分號(hào)！！不需要寫(xiě)冒號(hào)！！甚至連花括號(hào)都可以省略！！！完全裸奔代碼。但是一定要注意縮進(jìn)，因?yàn)?stylus 就是根據(jù)縮進(jìn)來(lái)識(shí)別選擇器層級(jí)和對(duì)應(yīng) css 樣式規(guī)則的。定義變量的方法也巨簡(jiǎn)單，直接使用 變量名 = 變量值 的形式。

npm run dev 運(yùn)行程序，打開(kāi) http://127.0.0.1:8080/

npm install --save stylus

然后輸入命令：

npx stylus stylus.styl -o stylus.css

就能把 stylus.styl 文件轉(zhuǎn)成 stylus.css 格式的樣式表。
更多語(yǔ)法細(xì)節(jié)：你不知道的Stylus