CSS预处理技术小结
CSS3
见另一篇文章
预处理技术
CSS 预处理器用一种专门的编程语言，进行 web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。 CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题
SASS ( SCSS=3.0+)
- 支持缩进式的语法
*.sass， 及 {} 语法*.scss - 变量：
$变量:值；作用域混乱 - mixins：定义
@mixin 名称($参数:值){使用$参数}调用@include 名([参数值]) - 支持嵌套，以使用“&”符号来引用父选择器
- 继承：
子样式{@extend 父样式}结果是
父样式,子样式{继承的样式};
子样式{单独的样式}
-
运算符： 支持四则运算及单位换算
-
支持颜色值函数
-
注释：
//； 多行/* */ -
语句：条件
@if 条件{}@else if 条件{}@then{}；循环@for $变量 from 开始 through 结束 {语句块} -
导入及导出：
被导入文件的样式：/* file.{type} */ a { background: #ff0000; }导入样式的文件：
@import "某.css"; @import "file.{type}"; p { background: #00ff00; }转译的 CSS 代码：
@import "某.css"; a { background: #ff0000; } p { background: #00ff00; }
LESS
- 支持 {} 语法
- 变量：
@变量:值；支持局部及全局变量 - mixins：定义
.类名(@参数:值){使用@参数}调用.类名([参数值]) - 支持嵌套，以使用“&”符号来引用父选择器
- 继承：
子样式{父样式}缺点会复制父选择器所有样式到子样式 - 运算符：支持四则运算
- 支持颜色值函数
- 注释：单行
//； 多行/* */ - 语句：条件
when(条件){}, 条件可以是isnumber()等等的函数；没有循环语句，使用递归 - 导入及导出：同 SCSS
Stylus
主要用来给 Node 项目进行 CSS 预处理支持
- 支持缩进式的语法及 {} 语法
- 变量：
变量=值；支持局部及全局变量 - mixins：定义
名(参数=值){使用参数}调用名([参数值]) - 支持嵌套，以使用“&”符号来引用父选择器
- 继承：
子样式{@extend 父样式}结果同 SCSS - 运算符：支持四则运算、单位换算及其它
- 支持颜色值函数
- 注释：单行
//； 多行/* */及/*! */Stylus 压缩的时候这段无视直接输出 - 语句：条件
if 条件{}else if 条件{}then{}；循环for 键变量 [, 值变量] in 表达式 {语句块} - 导入及导出：同 SCSS
综上所述，我们对 Sass、LESS 和 Stylus 做一个简单的对比总结：
- 三者都是开源项目；
- Sass 诞生是最早也是最成熟的 CSS 预处理器，有 Ruby 社区和 Compass 支持；Stylus 早期服务器 Node JS 项目，在该社区得到一定支持者；LESS 出现于 2009 年，支持者远超于 Ruby 和 Node JS 社区；
- Sass 和 LESS 语法较为严谨、严密，而 Stylus 语法相对散漫，其中 LESS 学习起来更快一些，因为他更像 CSS 的标准；
- Sass 和 LESS 相互影响较大，其中 Sass 受 LESS 影响，已经进化到了全面兼容 CSS 的 SCSS；
- Sass 和 LESS 都有第三方工具提供转译，特别是 Sass 和 Compass 是绝配；
- Sass、LESS 和 Stylus 都具有变量、作用域、混合、嵌套、继承、运算符、颜色函数、导入和注释等基本特性，而且以“变量”、“混合”、“嵌套”、“继承”和“颜色函数”称为五大基本特性，各自特性实现功能基本相似，只是使用规则上有所不同；
- Sass 和 Stylus 具有类似于语言处理的能力，比如说条件语句、循环语句等，而 LESS 需要通过 When 等关键词模拟这些功能，在这一方面略逊一层；
- 三者缺点：简单来说 CSS 预处理器语言较 CSS 玩法变得更高级了，但同时降低了 自己对最终代码的控制力。更致命的是提高了门槛，首先是上手门槛，其次是维护门槛，再来是团队整体水平和规范的门槛。
