安装:
- 需要Ruby环境,先确认是否安装了Ruby
ruby -v
安装Ruby
brew install ruby
- 安装Sass
sudo gem install sass
或者使用本地安装,下载sass到本地
gem install 下载好的文件路径;
- 确认是否安装成功
sass -v
- 更新Sass
gem update sass
- 卸载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
**展开输出方式 expanded **
sass --watch test.scss:test.css --style expanded
**紧凑输出方式 compact **
sass --watch test.scss:test.css --style compact
压缩输出方式 compressed
sass --watch test.scss:test.css --style compressed