css 预处理器之 less sass scss stylus

我们先问自己一个问题为什么需要预处理器？
答案是不言而喻的，那就是 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
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。