sass用法总结

sass⽤法总结
⼀、sass安装
Sass是⽤ruby写的，需要ruby的运⾏环境，从以下链接下载rubyinstaller进⾏安装（windows）：
（1）移除原有的ruby源地址
gem sources --remove
（2）新增可⽤的ruby源地址
gem sources -a
（3）安装Sass
gem install sass
（4）sublime⽀持scss⽂件⾼亮显⽰
借助package control安装sass插件，之后set syntax为sass即可。

（5）防⽌Sass中⽂注释乱码
后续写.scss代码过程中中⽂注释会有乱码的情况，找到engine.rb⽂件（⼀般位于Ruby22\lib\ruby\gems\2.2.0\gems\sass-3.4.18\lib\sass⽬录下⾯），在所有的require后⾯新增如下代码：
Encoding.default_external = Encoding.find('utf-8')
⾄此，Sass环境部署完成
⼆、编绎sass⽂件
1.切换到.scss⽂件所在⽬录
命令⾏下切换到代码⽂件夹⽬录（如Z:\），假设有⽂件test.scss⽂件，⾥⾯内容如下：（SASS完全⽀持css语法）
h1{
font-size:17px;
}
h2{
font-size:18px;
}
2.编译scss⽂件为css⽂件
运⾏命令：sass --style compressed test.scss test.css，即可⽣成压缩版的css⽂件，并且命名为test.css。

⼏点说明：
（1）--style 后⾯可以有四个参数可选，分别为
1. 嵌套输出⽅式 nested
2. 展开输出⽅式 expanded
3. 紧凑输出⽅式 compact
4. 压缩输出⽅式 compressed
（2）test.scss和test.css⽂件⽬录可以⾃定义，例如把Z盘sass⽬录下的test.scss⽂件编译为压缩版的⽂件，并放置在Z盘css⽬录下，那么命令即：sass --style compressed z:\sass\test.scss z:\css\test.css
（3）开发过程中，只需要修改scss⽂件，然后编译；前端页⾯只需要引⽤相应的css⽂件即可。

3.侦听⽂件和⽂件夹
　在实际编译过程中，你会发现上⾯的命令，只能⼀次性编译。

每次个性保存“.scss”⽂件之后，都得重新执⾏⼀次这样的命令。

如此操作太
⿇烦，其实还有⼀种⽅法，就是在编译 Sass 时，开启“watch”功能，这样只要你的代码进⾏任保修改，都能⾃动监测到代码的变化，并且给你直接编译出来：
sass --watch <要编译的Sass⽂件路径>/style.scss:<要输出CSS⽂件路径>/style.css
watch 举例：
来看⼀个简单的⽰例，假设我本地有⼀个项⽬，我要把项⽬中“bootstrap.scss”编译出“bootstrap.css”⽂件，并且将编译出来的⽂件放
在“css”⽂件夹中，我就可以在我的命令终端中执⾏：
sass --watch
sass/bootstrap.scss:css/bootstrap.css。