Sass 是什么？
Sass 是 Syntactically Awesome Style Sheets 的缩写，它是CSS的一个开发工具，提供了很多便利和简单的语法，让CSS看起来更像是一门语言，这种特性也被称为“CSS预编译” 。它的主要涉及思想是让我们可以按照编程的思路编写自己的样式，然后通过“编译器”生成我们所需要的CSS文件。
Sass 和 Scss 有什么区别？
Sass 和 Scss 其实是同一种东西，我们平时都称之为 Sass，两者不同之处有以下两点：
文件扩展名不同。 Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名；
语法书写方式不同。 Sass 是以严格的缩进式语法规则来书写，不带大括号“{}”和分号“；”，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。
安装
安装Ruby
在Ruby命令行下安装sass： gem install sass
如果未成功则需修改源，方法如下：
gem source --remove https://rubygems.org/
gem source -a https://ruby.taobao.org/
- 查看是否安装成功： sass -v
编译（注意所用语法及扩展名是否对应）
- 建立文件 test.scss
$blue: #1875e7;
div {
color: $blue;
}
命令行输入 sass test.scss
若要把结果保存到文件 sass test.scss test.css
sass支持4种编译风格的选项：
- nested 嵌套缩进的css代码，它是默认值；
- expanded 没有缩进的、扩展的css代码；
- compact 简洁格式的css代码；
- compressed压缩后的css代码。
生产环境一般使用最后一个选项
sass --style compressed test.scss test.min.css
- 可以让sass监听文件或目录
- 监听文件：sass --watch input.scss:output.css
- 监听目录：sass --watch sassFileDirectory:cssFileDirectory
基本语法
- 支持变量
$gray: #666; - 嵌套
ul {
li {
display: inline-block;
}
}
- 导入其他sass
@import 'reset' - mixin
可用mixin定义代码片段，且可传参。使用@include引入。 - 扩展、继承：使用@include
- 支持运算
- 颜色函数
- 注释
/**/标准的 CSS 注释,会保留到编译后的文件
//单行注释,只保留在 SASS 源文件中，编译后会被省略。
/*! 重要注释 */压缩模式也会保留，主要用于声明版权
