一、什么是 Sass ？
Sass 是一门高于 css 的元语言（什么是元语言），它能用来清晰地、结构化地描述文件样式，有着比普通 css 更加强大的功能。
二、Sass 和 Scss 的区别
相同点：
- sass 和 scss 都是同一种元语言，只不过我们平时都称之为 Sass。
不同点：
- 文件扩展名不同。Sass 是以".sass"后缀作为扩展名；而 Scss 是以".scss"后缀作为扩展名。
- 语法书写格式不同。Sass 是以严格的缩进式语法规则来写，不带大括号"{}"和分号";"；而 Scss 和我们的 css 语法书写格式非常类似，带大括号"{}"和分号";"。
三、Sass 安装
- windows 平台
windows 平台下安装 Sass 需要检查该平台是否安装了 Ruby（什么是 Ruby ），怎么检查自己的平台有没有安装 Ruby？在命令行终端输入以下命令即可。
ruby -v
如果出现上面信息就表明你的平台已经安装 Ruby 了，如果没有出现以上信息可以去 Ruby的官网下载对应的 Ruby 版本。
安装过程中选择第二个选项，将 Ruby 可执行文件添加到 PATH 系统环境中。
安装好 Ruby 之后，就可以安装 Sass 了。打开电脑的命令行终端，输入下面的命令：
gem install sass
检测 Sass 是否安装成功及如何更新 Sass
检测命令：
sass -v
如果在你的命令行终端看到以上类似信息就表示你的平台 Sass 安装成功了。
更新 Sass
更新命令：
gem update sass
同样，看到以上信息，表示 Sass 已经更新到最新版。
四、语法格式
我们以下面这段 css 代码作为例子，比较 Sass 语法格式和 Scss 语法格式的不同
body {
background-color: #CCCCCC;
font-family: sans-serif;
}
- Sass 语法格式
$background-color: #CCCCCC
$font-family: sans-serif
body
background-color: #CCCCCC
font-family: sans-serif
注：这种语法格式对于前端人员不太容易接受，容易出错。
- Scss 语法格式
$background-color: #CCCCCC
$font-family: sans-serif
body {
background-color: #CCCCCC;
font-family: sans-serif;
}
注：Scss 是 Sass 的新语法格式，这种语法格式对于前端人员比较容易接受。
五、Sass 编译
Sass 编译有以下几种编译方法：
-
命令编译
定义：命令编译是指使用命令行终端，通过输入 Sass 指令来编译 Sass。这种方式最简单也最直接。
单文件编译：sass <要编译的 Sass 文件路径>/style.sass:<要输入的 css 文件路径>/style.css
多文件编译：（此操作可以对整个项目所有 Sass 文件编译成 css 文件）
sass sass/:css/
缺点：
在实际编译过程中，上面的命令只能一次性编译。解决方法：
开启 "watch" 功能，这样只要代码进行修改，都能自动监测到代码的变化，并且直接编译出来。sass --watch <要编译的 Sass 文件路径>/style.sass:<要输出的 CSS 文件路径 >/style.css
例如：
sass --watch
sass/test.scss:css/test.css 自动化编译（ 如：Grunt 前端自动化工作流 grunt-sass、Gulp 前端自动化工作流 gulp-ruby-sass 等。）
六、4种不同 css 风格的输出方式
sass 代码：
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
}
-
嵌套输出方式 nested
编译时带上参数 "--style nested"：sass --watch test.scss:test.css --style nested
编译出来的 css 样式风格：
nav ul { margin: 0; padding: 0; list-style: none;} nav li { display: inline-block; } -
展开输出方式 expanded
编译时带上参数 "--style expanded"：sass --watch test.scss:test.css --style expanded
编译出来的 css 样式风格（大括号另起一行）：
nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } -
紧凑输出方式 compact
编译时带上参数 "--style compact"：sass --watch test.scss:test.css --style compact
编译出来的 css 样式风格（单行风格）：
nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } -
压缩输出方式 compressed
编译时带上参数 "--style compressed"：sass --watch test.scss:test.css --style compressed
编译出来的 css 样式风格（去掉标准的 sass 和 css 注释和空格）：
nav ul{margin:0;padding:0;list-style:none;}nav li{display:inline-block;}
只有强者才懂得斗争；弱者甚至失败都不够资格，而是生来就是被征服的。
希望此文章能够帮助你。
欢迎关注我的博客网站。
咱们，下一篇见！
