css 预处理器 - sass/scss、less、stylus

css 预处理工具，可以将其对应的DSL(领域特定语言)编译为 css

基本介绍

sass/scss

• 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

• 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

• 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 风格，用大括号 来书写

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

   // 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 就近加载

2. 嵌套语法一致，用 & 引用父集 -- 嵌套不建议超过 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;
       }
       }
   }
   ```

3. 插值

   // less
   @prefix: ui;
   .@{prefix}-button {
   color: #333;
   }
   
   // sass
   $prefix: ui
   .#{$prefix}-button {
       color: #333;
   }
   
   // stylus
   prefix = ui
   .{prefix}-button
       color #333

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

   • less 直接引入

     // 定义mixin，可用 . 或 # 声明，#key() {} ，也可省略()
     .border() {
         width: 200%; // 控制border的长或者高
         height: 200%;
         position: absolute;
         top: 0;
         left: 0;
         z-index: 0;
         content: "";
         transform: scale(0.5);
         transform-origin: 0 0;
         box-sizing: border-box;
     }
     
     #top-1px(@color:#ccc){
         position: relative;
         &:after {
             border-top: 1px solid @color;
             .border()
         }
     }
     

   • scss 要先声明 @mixin,使用时 @include
5. 继承
6. 函数
7. 逻辑控制：sass, stylus 支持 if else for each while, less 使用 mixin when 处理

• 具体语法看官方文档

总结：

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

Postcss 是什么样的一种存在？

• 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']
          })
      ]
  }

参考

• 知乎
• 三种预处理器对比