认识sass/scss

众所周知css并不能算是一们真正意义上的“编程”语言，它本身无法未完成像其它编程语言一样的嵌套、继承、设置变量等工作。为了解决css的不足，开发者们想到了编写一种对css进行预处理的“中间语言”，可以实现一些“编程”语言才有的功能，然后自动编译成css供浏览识别，这样既一定程度上弥补了css的不足，也无需一种新的语言来代替css以供浏览器识别。于是css预处理语言SASS就应运而生了。

sass诞生于2007年，由Ruby开发者设计开发，是最早的css预处理语言，有比less更为强大的功能。但因其一开始的缩进式语法并不能被开发者们接受，所以使用率不高。sass从第三代开始，放弃了缩进式风格，并且完全向下兼容普通的css代码，这一代以后的sass也被称为scss，目前使用 scss 语法的较多，我们后面学习用的就是。

安装

为了简单起见，我们这安装的是使用纯JavaScript 实现，它的运行速度比此处列出的其他选项要慢一些。但它和其它方式实现的sass具有相同的API，以后使用其它的也没压力。

npm install -g sass

将scss文件编译成css

新建个 .scss 文件，然后编写 sass 代码，接着运行命令：

sass ./sass/1.scss:./css/1.css
# 或者
sass ./sass/1.scss ./css/1.css
# 或者 处理目录
sass ./sass:./css/

命令的含义是：

sass  scss源文件路径:编译后的css文件路径
# 或者
sass  scss源文件路径 编译后的css文件路径
# 或者 处理目录
sass scss源文件:编译后的css文件目录
实时监控

如果每次编写完sass代码，都要手动编译一下，显然是不可接受的，我们可以使用 --watch 或者 -w 选项让sass实时监视某个目录的变化：

sass --watch ./sass:./css/
# 或者
sass -w ./sass:./css/
输出格式

sass 编译输出的css文件风格有四种（旧版本）：nested：嵌套（默认）、compact：紧凑、expanded：展开的、compressed：压缩。

新版本有两种： expanded：展开代码(默认)、 compressed 压缩代码。

使用 --style=<name> 或者 -s 风格名 去控制：

sass --style=compressed ./sass:./css/ 
# 或者
sass -s compressed ./sass:./css/