Sass

安装：

1. 需要Ruby环境，先确认是否安装了Ruby

ruby -v

安装Ruby

brew install ruby

2. 安装Sass

sudo gem install sass

或者使用本地安装，下载sass到本地

gem install 下载好的文件路径;

3. 确认是否安装成功

sass -v

4. 更新Sass

gem update sass

5. 卸载Sass

gem uninstall sass

Sass编译成css：

• 命令编译
  单文件编译并自动监测到代码的变化：

sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

多文件编译：

sass sass/:css/

上面的命令表示将项目中“sass”文件夹中所有“.scss”(“.sass”)文件编译成“.css”文件，并且将这些 CSS 文件都放在项目中“css”文件夹中。

• GUI工具编译
  推荐使用以下两个：
  Koala (http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html)
  CodeKit (http://www.w3cplus.com/preprocessor/sass-gui-tool-codekit.html)

• 自动化编译
  暂不讨论

常见的编译错误：

在编译 Sass 代码时常常会碰到一些错误，让编译失败。这样的错误有系统造成的也有人为造成的，但大部分都是人为过失引起编译失败。
而最为常见的一个错误就是字符编译引起的。在Sass的编译的过程中，是不是支持“GBK”编码的。所以在创建 Sass 文件时，就需要将文件编码设置为“utf-8”。
另外一个错误就是路径中的中文字符引起的。建议在项目中文件命名或者文件目录命名不要使用中文字符。而至于人为失误造成的编译失败，在编译过程中都会有具体的说明，大家可以根据编译器提供的错误信息进行对应的修改。

不同样式风格的输出方法：

嵌套输出方式 nested

sass --watch test.scss:test.css --style nested

nested.jpg

**展开输出方式 expanded **

sass --watch test.scss:test.css --style expanded

expanded.jpg

**紧凑输出方式 compact **

sass --watch test.scss:test.css --style compact

compact.jpg

压缩输出方式 compressed

sass --watch test.scss:test.css --style compressed

compressed.jpg

混合宏、继承、占位符

对比