我们先问自己一个问题为什么需要预处理器？
答案是不言而喻的，那就是 css 本身有些缺点：
- 语法不够强大，不能够嵌套书写，导致项目中样式逻辑一点也不清楚。
- 没有变量和逻辑上的复用机制，当有需要复用代码的时候，只能重复书写样式，导致难以维护。
为了处理上面的问题，css 预处理器诞生了，比较流行的就是sass、less、stylus 他们共同的特点是：
- 变量：提高代码的复用性。
Sass：使用「$」对变量进行声明，变量名和变量值使用冒号进行分割
Less：使用「@」对变量进行声明
Stylus：直接变量名和变量值之间『等号』连接。 - 作用域
Sass：它的方式是三者中最差的，不存在全局变量的概念
Stylus 和 Less：它的方式和 js 比较相似，逐级往上查找变量 - 嵌套：对于 css 来说，有嵌套的写法表达逻辑无疑是更完美的。
三者在这处的处理都是一样的，使用「&」表示父元素
开始。
项目是在一个简单的 react 环境里面做的，目录结构如下：
┣✈ 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 ，并输入内容：
@bgc: green;
div {
width:100px;
height:100px;
background-color: @bgc;
}
npm run dev 运行程序，打开http://127.0.0.1:8080/
image
单独使用：
只需要全局安装 less ，然后：
lessc less.less -o css.css
就能把 less.less 文件转成 css 格式的样式表。
二、sass
在 webpack 中使用：
SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。另外，SCSS 还能识别大部分 CSS hacks（一些 CSS 小技巧）和特定于浏览器的语法。所以 scss 就当相于 sass 的 css3。sass 的运行环境是 ruby ，但我们的开发环境一般都是基于 node 开发，所以我们需要安装 node-sass 提供环境，安装 sass-loader 翻译 sass 和 scss 到 css。
安装环境：
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 ，并输入内容：
$body-color: red;
div {
width:100px;
height:100px;
background-color: $body-color;
}
npm run dev 运行程序，打开http://127.0.0.1:8080/
image
三、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 ，并输入内容：
bgc = blue
div
width 100px
height 100px
background-color bgc
stylus 不需要写分号！！不需要写冒号！！甚至连花括号都可以省略！！！完全裸奔代码。但是一定要注意缩进，因为 stylus 就是根据缩进来识别选择器层级和对应 css 样式规则的。定义变量的方法也巨简单，直接使用 变量名 = 变量值 的形式。
npm run dev 运行程序，打开 http://127.0.0.1:8080/
image
单独使用：
安装
npm install --save stylus
然后输入命令：
npx stylus stylus.styl -o stylus.css
就能把 stylus.styl 文件转成 stylus.css 格式的样式表。
作者：学贤社
链接：https://www.jianshu.com/p/3c39619f1d1a
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
网友评论