css-预处理器-sassscsslessstylus

jiezi

5 年前

css 预处理工具，可以将其编译为 css

SASS 2007 年诞生，最早也是最成熟的 CSS 预处理器，拥有 ruby 社区的支持和 compass 这一最强大的 css 框架
Sass 的缩排语法，对于写惯 css 前端的 web 开发者来说很不直观，sass 不兼容 css 代码
Sass3 就变成了 Scss(sassy css) 与原来的语法兼容，只是用 {} 取代了原来的缩进
sass 的运行依赖于 ruby 环境（compass 将 sass 编译为 css）
现在可用 node-sass 来编译 sass/scss 文件
- node-sass 是一套在 node.js 用 LibSass 編 sass/scss 的工具
- 原始的 sass 是用 ruby 编写的，所以需要 ruby 环境，libSass 是原始 sass 引擎的一个 c/c++ 接口，使用它编译 sass 不依赖于 ruby，可以使用其他语言使用 libSass
- node-sass
- ruby-sass 与 libsass 的区别
- 安装 node-sass 时，会去 GitHub 下载一个 .node的文件而这个文件托管在墙外的服务器上，所以失败了 node-sass 安装失败解决方案
以 .sass 或 .scss 为文件后缀名称（现在一般都是用 scss）

less 2009 年出现，受 sass 的影响较大，但又使用 CSS 的语法，让大部分开发者和设计师更容易上手，在 ruby 社区之外支持者远超过 SASS，其缺点是比起 SASS 来，可编程功能不够，不过优点是简单和兼容 CSS，反过来也影响了 sass 演变到了 scss 的时代，著名的 Twitter Bootstrap 就是采用 LESS 做底层语言的。
less 可以使用 less.js 在浏览器运行时中解析 less 代码
也可以在 node 环境中安装 less，提前编译 less 文件 `npm install -g less &
lessc styles.less styles.css` (可以加参数控制编译后的 css 排版及压缩)
以 .less 为文件后缀名称

Stylus，2010 年产生，来自 Node.js 社区，主要用来给 Node 项目进行 CSS 预处理支持，由 TJ 大神开发
安装及编译 npm install stylus -g & stylus src/ (可以加参数控制编译后的 css 排版及压缩)
以 .styl 为文件后缀

现在一般都是配合 webpack 使用这几种预处理语言，需要先 安装编译器、对应 loader，然后再 module.rules 配置其具体规则

less 基本语法属于 css 风格，而 sass，stylus 利用缩进，空格，换行来减少需要输入的字符

目前 scss, stylus 也可以支持 css 风格，用大括号来书写

变量符 @ $ 无变量符号直接变量名

less 
@size: 10px;
.box {width: @size;}

scss
$red: #c00;
strong {color: $red;}

stylus
red = #c00
strong
    color: red

css 的变量规范
/* global scope */
:root {--red: #c00;}
strong {color: var(--red);
}

变量作用域：less 惰性加载，sass，stylus 就近加载

嵌套语法一致，用 & 引用父集 — 嵌套不建议超过 4 层

less 不支持跳出嵌套
sass @at-root

@at-root 支持参数，跳出不同的嵌套 
without：all，表示所有
without: rule，表示常规 css，rule 是默认值
without: media，表示 media
without: support，@support 现在使用还不广泛

// child1 将跳出 parent 的嵌套
.parent1{
    color:#f00;
    @at-root .child1 {width:200px;}
    }
}

插值

less
@prefix: ui;
.@{prefix}-button {color: #333;}

sass
$prefix: ui
.#{$prefix}-button {color: #333;}

stylus
prefix = ui
.{prefix}-button
    color #333

混入（mixin）：预处理器最精髓的功能，样式层面上的抽象（相当于 copy 代码片段）

less 直接引入
scss 要先声明 @mixin, 使用时 @include

继承
函数
逻辑控制：sass, stylus 支持 if else for each while, less 使用 mixin when 处理

具体语法看官方文档

sass 大而全，出现时间最久，但依赖于 ruby (compass)
less 可以平滑的从 css 过度而来，可以在运行时解析，逻辑功能有些缺失
stylus 起源 nodejs 社区，语法灵活，有一个官方开发的样式库 nib，同样提供了不少好用的 mixin

PostCSS 既不是预处理器也不是后处理器，而是一个平台，其本身并不处理任何具体任务，只有当我们为其附加各种插件之后，他才具有实用性
PostCSS 就像是一个使能器（enabler），他可以不用完全替代现有的预处理器或后处理器，而只是作为他们的补充工具。PostCSS 的工作机制主要包含解析代码、执行插件、渲染结果三部分：
PostCSS 会将 css 代码解析成包含一系列节点的抽象语法树（AST, Abtract Syntax Tree）。
PostCSS 常用插件（用这些插件集合其实已经可以代替三大 css 预处理器）
- cssnext, 未来语法，颜色函数 …
- postcss-import, 导入文件
- autoprefixer, 自动前缀
- precss, 集成 sass 预处理器，功能强大包括 autoprefixer mixins
- postcss-mixins, 混合宏，是用类似 sass 的混合宏，不可与 precss 混用
- postcss-conditions 逻辑判断
- …

目前 Postcss 在一般项目中的用途

使用其 autoprefixer 插件，为 css 属性增加前缀
创建 postcss.config.js

// webpack.config.js
{
    test: /\.less$/,
    loader: ExtractTextWebpackPlugin.extract([{loader: 'css-loader', options: { minimize: true}},
        'postcss-loader', // 要在预处理器处理完之后，在使用 postcss-loader 
        'less-loader',
    ]),
}

// postcss.config.js
module.exports = {
    plugins: [require('autoprefixer')({'browsers': ['> 1%', 'last 2 versions']
        })
    ]
}

知乎
三种预处理器对比

css-预处理器-sassscsslessstylus

基本介绍

sass/scss

less

stylus

使用现状

基本语法

总结：

Postcss 是什么样的一种存在？

参考