1. Scss 简介
Sass (Syntactically Awesome Stylesheets) 是一种动态样式语言，Sass 语法属于缩排语法，比 css 比多出好些功能 (如：变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)，更容易阅读。
Sass 的缩排语法，对于写惯 css 前端的 web 开发者来说很不直观，也不能将 css 代码加入到 Sass 里面。
因此对 Sass 语法进行了改良，Sass3 就变成了 Scss(Sassy CSS)。SCSS(Sassy CSS) 是 CSS 语法的扩展。
这意味着每一个有效的 CSS 也是一个有效的 SCSS 语句，与原来的语法兼容，只是用 {} 取代了原来的缩进。
2. 变量
Sass 变量使用 $ 符号；
Sass 变量可以存储以下信息：字符串、数字、颜色值、布尔值、列表、null 值；
<style lang="scss">
$sysColor: red;
$sysFontSize: 20px;
$side : left;
.wrap{
color: $sysColor;
font-size: $sysFontSize;
// 如果变量需要镶嵌在字符串之中，就必须需要写在 #{} 之中
border-#{$side}: 1px solid pink;
}
</style>
作用域
变量的作用域只能在当前的层级上有效果。
如下所示 contanier2 的样式为它内部定义的 green，contanier1 标签则是为 red。
<style lang="scss">
$sysColor: red;
.contanier1{
color: $sysColor;
}
.contanier2{
$sysColor: green; // 只在 contanier2 里头有用，局部作用域
color: $sysColor;
}
</style>
!global
Scss 中我们可以使用 !global 关键词来设置变量是全局的。
注意： 所有的全局变量我们一般定义在同一个文件，如：_globals.scss，然后我们使用 @include 来包含该文件。
<style lang="scss">
$sysColor: red;
.contanier2{
$sysColor: green !global;
color: $sysColor;
}
.contanier1{
color: $sysColor;
}
</style>
计算功能
支持数字的加减乘除、取整等运算 (+, -, *, /, %)，如果必要会在不同单位间转换值。
<style lang="scss">
$sysWidth: 100px;
.contanier1{
margin: (14px / 2);
width: $sysWidth * 2;
height: 100px + 50px;
}
</style>
除法运算（ / ）
/ 在 CSS 中通常起到分隔数字的用途，SassScript 作为 CSS 语言的拓展当然也支持这个功能，同时也赋予了 / 除法运算的功能。也就是说，如果 / 在 SassScript 中把两个数字分隔，编译后的 CSS 文件中也是同样的作用。
以下情况， / 将被视为除法运算符号：
- 如果值 或 值的一部分，是变量或者函数的返回值；
- 如果值被圆括号包裹；
- 如果值是算数表达式的一部分；
p {
font: 10px/8px; // Plain CSS, no division
$width: 1000px;
width: $width/2; // Uses a variable, does division
height: (500px/2); // Uses parentheses, does division
margin-left: 5px + 8px/2px; // Uses +, does division
}
编译为
p {
font: 10px/8px;
width: 500px;
height: 250px;
margin-left: 9px;
}
如果需要使用变量，同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中，只需要用 #{} 插值语句将变量包裹。
p {
$font-size: 12px;
$line-height: 30px;
font: #{$font-size}/#{$line-height};
}
编译为
p {
font: 12px/30px;
}
3. 嵌套
Scss 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器。
<style lang="scss">
$sysWidth: 100px;
.wrap{
.contanier1{
width: $sysWidth * 2;
height: 100px + 50px;
}
}
</style>
很多 CSS 属性都有同样的前缀，如：font-family, font-size 和 font-weight ，text-align, text-transform 和 text-overflow。
在 Scss 中，可以使用嵌套属性来编写它们：
注意： font、 border 后面必须加上冒号。
.contanier1{
font: {
size: 25px;
weight: bold;
}
border: {
width: 1px;
style: solid;
color: red;
};
}
在嵌套的代码块内，可以使用 & 引用父元素。
.contanier1{
font: {
size: 25px;
weight: bold;
}
&:hover{
color: green;
}
}
4. 注释
Scss 共有两种注释风格。
标准的 CSS 注释 /* comment */ ，会保留到编译后的文件。
单行注释 // comment，只保留在 scss 源文件中，编译后被省略。
在 /* 后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。
/*!
重要注释！
*/