Sass、LESS和Stylus

[pengkobe]

这三种 CSS 预处器的语法和 CSS 原生语法差不多，这里对比下 3 中预处理器的特色

Sass

Sass也同时支持老的语法,就是不使用花括号和分号，使用 .sass 扩展名时可以启用简约语法模式，即省略花括号的写法。

• Sass 声明变量必须是 $ 开头
• 赋值使用 : 号
• 支持嵌套，& 可以引用父元素
• 支持 Mixins，特别的是需要带声明符号 @mixin ，与调用符号 @include
• 支持继承，用法与 Stylus 相同 @extend .classname;
• 支持导入，@import "reset.css";@import "file.{type}";
• 支持颜色函数，lighten($color, 10%); /* 返回的颜色在$color基础上变亮10% */
• 支持运算符，无差异
• 支持属性前缀，个人倾向于使用插件，忽略
• 支持 3d 文本处理，使用 mixin 非常方便

LESS

• 声明变量使用是的 @ 字符
• 赋值使用 : 号
• 支持嵌套，& 可以引用父元素
• 支持 Mixin
• 支持继承，支持使用 .classname; 即可
• 支持导入，@import "reset.css";@import "file.{type}";
• 支持颜色函数，lighten(@color, 10%); /* 返回的颜色在@color基础上变亮10% */
• 支持属性前缀，个人倾向于使用插件，忽略

Stylus

文档参考：http://stylus-lang.com/docs/media.html
Stylus 的语法花样多一些，使用 .styl 的扩展名，Stylus 也接受标准的CSS语法，支持不带花括号和分号的语法

• 声明变量最好使用 $ 开头，@ 的变量不会赋值
• 赋值使用 = 号
• 支持嵌套，& 可以引用父元素
• 支持 Mixins，调用方式与 Less 类同
• 支持继承，用法与 Sass 相同 @extend .classname;
• 支持导入，@import "reset.css";@import "file.{type}";
• 支持颜色函数，lighten(color, 10%); /* 返回的颜色在'color'基础上变亮10% */
• 支持属性前缀，个人倾向于使用插件，忽略
• 可以很方便的通过设置宽度适配出各列布局
• 注释写法相同

扩展阅读

• CSS 技术趋势:https://stateofdev.com/c/frontend
• 预处器的对比——Sass、LESS和Stylus

[pengkobe]

Errors

Stylus WIN7 报Path must be a string. Received undefined
解决办法: 升级 stylus-loader