我們先問自己一個問題為什么需要預處理器等太？
答案是不言而喻的爷耀，那就是 css 本身有些缺點：
- 語法不夠強大资柔，不能夠嵌套書寫焙贷，導致項目中樣式邏輯一點也不清楚。
- 沒有變量和邏輯上的復用機制贿堰，當有需要復用代碼的時候辙芍，只能重復書寫樣式，導致難以維護羹与。
為了處理上面的問題故硅，css 預處理器誕生了，比較流行的就是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 的 css3伟端。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ù)縮進來識別選擇器層級和對應 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 格式的樣式表飘哨。
作者：學賢社
鏈接：http://www.reibang.com/p/3c39619f1d1a
來源：簡書
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)琐凭，非商業(yè)轉(zhuǎn)載請注明出處芽隆。
