我們先問自己一個問題為什么需要預(yù)處理器？
答案是不言而喻的，那就是 CSS 本身有些缺點：
- 語法不夠強大，不能夠嵌套書寫富玷，導致項目中樣式邏輯一點也不清楚。
- 沒有變量和邏輯上的復用機制，當有需要復用代碼的時候赎懦，只能重復書寫樣式雀鹃，導致難以維護。
為了處理上面的問題励两，CSS 預(yù)處理器誕生了黎茎，比較流行的就是 Sass、Less当悔、Stylus 他們共同的特點是：
- 變量：提高代碼的復用性傅瞻。
Sass：使用「$」對變量進行聲明，變量名和變量值使用冒號進行分割
Less：使用「@」對變量進行聲明
Stylus：直接變量名和變量值之間『等號』連接盲憎。 - 作用域
Sass：它的方式是三者中最差的嗅骄，不存在全局變量的概念
Stylus 和 Less：它的方式和 js 比較相似，逐級往上查找變量 - 嵌套：對于 css 來說饼疙，有嵌套的寫法表達邏輯無疑是更完美的溺森。
三者在這處的處理都是一樣的，使用「&」表示父元素
開始窑眯。
項目是在一個簡單的 React 環(huán)境里面做的屏积，目錄結(jié)構(gòu)如下：
┣? webpack.config.js ： webapck的配置文件
┣? package.json：依賴包的身份證
┣? main.js ：主入口文件
┣? index.html：首頁
┣? 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 運行程序肾请，打開http://127.0.0.1:8080/
單獨使用：
只需要全局安裝 less 留搔，然后：
lessc less.less -o css.css
就能把 less.less 文件轉(zhuǎn)成 css 格式的樣式表更胖。
二、Sass
在 Webpack 中使用：
SCSS 是 Sass 3 引入新的語法隔显，其語法完全兼容 CSS3却妨，并且繼承了 Sass 的強大功能。也就是說括眠，任何標準的 CSS3 樣式表都是具有相同語義的有效的 SCSS 文件彪标。另外，SCSS 還能識別大部分 CSS hacks（一些 CSS 小技巧）和特定于瀏覽器的語法掷豺。所以 Scss 就當相于 Sass 的 CSS捞烟。Sass 的運行環(huán)境是 ruby ，但我們的開發(fā)環(huán)境一般都是基于 node 開發(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 運行程序苍息，打開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 不需要寫分號＞核肌表谊！不需要寫冒號！盖喷！甚至連花括號都可以省略１臁！传蹈！完全裸奔代碼押逼。但是一定要注意縮進，因為 stylus 就是根據(jù)縮進來識別選擇器層級和對應(yīng) css 樣式規(guī)則的惦界。定義變量的方法也巨簡單挑格，直接使用 變量名 = 變量值 的形式。
npm run dev 運行程序沾歪，打開 http://127.0.0.1:8080/
單獨使用：
安裝
npm install --save stylus
然后輸入命令：
npx stylus stylus.styl -o stylus.css
就能把 stylus.styl 文件轉(zhuǎn)成 stylus.css 格式的樣式表漂彤。
更多語法細節(jié)：你不知道的Stylus
