CSS的几款流行预处理器——简易介绍

前言：

• 预处理器是在真正的编译开始之前由编译器调用的独立程序。预处理器可以删除注释、包含其他文件以及执行宏（宏macro是一段重复文字的简短描写）替代。简单来说它就是一种程序，需要将一种程序的数据转换成另一种程序的数据
• CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性，无需考虑浏览器的兼容性问题，例如你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让CSS 更见简洁，适应性更强，代码更直观等诸多好处

sass

安装

sass基于 Ruby 语言开发而成，因此安装sass前需要安装Ruby

gem install sass
gem install compass

特性

• 变量：使用 $ 符号标识变量，变量和值之间使用冒号（:）隔开，和css属性是一样的
• 嵌套 CSS规则：解决css重复写选择器的烦恼
• 导入 sass文件：@import 规则
• 静默注释：注释内容不会出现在生成的css文件中
• 混合器：声明的 @mixin 通过 @include 来调用
• 使用选择器继承来精简CSS：@extend

less

安装

在Node.js环境中使用，因此安装less之前需要安装Node.js

npm install less -g

特性

• 变量：使用 @ 符号标识变量，变量和值之间使用冒号（:）隔开，和css属性是一样的
• 混合：一组属性从一个规则集包含（或混入）到另一个规则集的方法
• 嵌套：解决css重复写选择器的烦恼
• 运算：算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运
• 转义：允许使用任意字符串作为属性或变量值
• 函数：
• 命名空间和访问符：
• 映射：
• 作用域：Less 中的作用域与 CSS 中的作用域非常类似。首先在本地查找变量和混合（mixins），如果找不到，则从“父”级作用域继承
• 注释：块注释和行注释都可以使用
• 导入 ：@import 规则

stylus

安装

在Node.js环境中使用，因此安装less之前需要安装Node.js

npm install stylus -g

特性

• 冒号可有可无
• 分号可有可无
• 逗号可有可无
• 括号可有可无
• 变量：stylus对变量是没有任何设定的，可以是以$开头，或者任何的字符，而且与变量之间可以用冒号，空格隔开， 但是在stylus中不能用@开头
• 插值
• 混合
• 数学计算
• 强制类型转换
• 动态引入
• 条件表达式
• 迭代
• 嵌套选择器
• 父级引用
• Variable function calls
• 词法作用域
• 内置函数（超过 60 个）
• 语法内函数
• 压缩可选
• 图像内联可选
• Stylus 可执行程序
• 健壮的错误报告
• 单行和多行注释
• CSS 字面量
• 字符转义
• TextMate 捆绑