#https://www.cnblogs.com/fatty-yu/p/6639119.html
#安装
1. 必须安装ruby，直接使用安装包进行安装。
2. 安装rubyGems镜像,命令：
gem sources --add http://gems.ruby-china.org/ --remove
https://rubygems.org/
gem sources -l(这里是L的小写，不是1，不是i)
3. 安装sass,命令：gem install sass
4. SASS文件就是普通的文本文件，里面可以直接使用CSS语法。文件后缀名
是.scss，意思为Sassy CSS
#配置
5. 编译命令：sass test.scss test.css
编译风格：
* nested：嵌套缩进的css代码，它是默认值。
* expanded：没有缩进的、扩展的css代码。
* compact：简洁格式的css代码。
* compressed：压缩后的css代码。
生产环境：用最后一个
sass --style compressed test.sass test.css
6. 监听：某个文件或目录，一旦源文件有变动，就自动生成编译后的版本(
目录中不能带中文，否则会报错)
sass --watch input.scss:output.css // watch
a file
sass --watch app/sass:public/stylesheets // watch a
directory
#变量
7. 所有变量以$开头
$blue:blue;
div{color:$blue;}
8. 变量需要镶嵌在字符串之中，就必须需要写在#{}之中
$side : top-left;
.rounded {border-#{$side}-radius: 5px;}
9. SCSS是SASS的新语法，是CSS3语法的超集，也就是说所有有效的CSS3样式
也同样适合于SASS
10. 计算功能：
$var:30px;
body {margin: (14px/2);top: 50px + 100px;right: $var * 10%;}
11. 嵌套：
div {
h1 {
color:red;
}
}
12. 属性嵌套
p {
border: {
color: red;
}
}
13. 嵌套的代码块内，可以使用&引用父元素
a {
&:hover { color: #ffb3ff; }
}
14. 重要注释:即使是压缩模式编译，也会保留这行注释，通常可以用于声明
版权信息。
/*!重要注释！
*/
15. 继承：
.class1 {border: 1px solid #ddd;}
.class2 {@extend .class1;font-size:120%;}
16. Mixin(函数)
定义函数：
@mixin pullLeft{
float:left;
margin-left:10px;
}
调用函数:
div{@include pullLeft;}
带参函数:
@mixin left($value: 10px) {
float: left;
margin-right: $value;
}
调用函数:
div {@include left(20px);}
17. 生成浏览器前缀
@mixin rounded($vert, $horz, $radius: 10px) {
border-#{$vert}-#{$horz}-radius: $radius;
-moz-border-radius-#{$vert}#{$horz}: $radius;
-webkit-border-#{$vert}-#{$horz}-radius: $radius;
}