我们先问自己一个问题为什么需要预处理器？

答案是不言而喻的，那就是 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 组件┗✈ :放置样式表    ┣✈ 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>        )    } }

在 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 运行程序，打开

单独使用：

只需要全局安装 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 运行程序，打开

三、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 = bluediv    width 100px    height 100px    background-color bgc

stylus 不需要写分号！！不需要写冒号！！甚至连花括号都可以省略！！！完全裸奔代码。但是一定要注意缩进，因为 stylus 就是根据缩进来识别选择器层级和对应 css 样式规则的。定义变量的方法也巨简单，直接使用 变量名 = 变量值 的形式。

npm run dev 运行程序，打开

单独使用：

安装

npm install --save stylus

然后输入命令：

npx stylus stylus.styl -o stylus.css

就能把 stylus.styl 文件转成 stylus.css 格式的样式表。

转自简书：cain07

原文链接：