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 语句，与原来的语法兼容，只是用 {} 取代了原来的缩进。
传送门：Scss 基本使用 （ @extend、 @mixin、@import、@if、@for、@while、@each ）
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>
默认变量 !default
Scss 的默认变量仅需在值后面加上 !default 即可。
<style lang="scss"> $color:red !default; .contanier1{ color: $color; } </style>
编译出来的 CSS
.contanier1{ color: red; }
如果分配给变量的值后面加了 !default ，意味着该变量如果已赋值，那么它不会被重新赋值。
但是，如果它尚未赋值，那么它会被赋予新的给定值。
<style lang="scss"> $color: green; $color:red !default; .contanier1{ color: $color; } </style>
编译出来的 CSS
.contanier1{ color: green; }
上述例子因为变量color已经被赋值为 green，所以再给它赋默认值时不会影响它原来的值，color 的值仍然是 green。
作用域
变量的作用域只能在当前的层级上有效果。
如下所示 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 源文件中，编译后被省略。 在 /* 后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。 /*! 重要注释！ */
