SCSS (Sassy CSS)，一款css预处理语言，SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。SCSS 需要使用分号和花括号而不是换行和缩进。SCSS 对空白符号不敏感，其实就和css3语法一样，其后缀名是分别为 .scss。
简言之，SCSS继承了SASS，而又摒弃了SASS严格的语法风格，完全兼容CSS3的写法
“你完全可以在scss文件里写CSS3”
SCSS相比于CSS3多了：
1.变量
通过变量可以让独立的 css 值变得可重用，无论是在一条单独的规则范围内还是在整个样式表中。
$ 符号来标识变量；把反复使用的css属性值定义成变量；
$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color; // 变量中可存在变量
$link-color: blue;
a {
color: $link_color; // 中划线和下划线等价，包括对混合器和Sass函数的命名
}
$side : left;
.rounded {
border-#{$side}-radius: 5px; // 如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。
}
2.嵌套
选择器嵌套
#content {
article {
h1 { color: #333 }
p { margin-bottom: 1.4em }
}
aside { background-color: #EEE }
}
/* 编译后 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }
3.计算
所有数据类型均支持相等运算 == 或 !=，此外，每种数据类型也有其各自支持的运算方式。
数字运算: 支持数字的加减乘除、取整等运算 (+, -, *, /, %)
$var: 20px;
body {
margin: (14px/2);
top: 50px + 100px;
right: $var * 10%;}
字符串运算： + 可用于连接字符串
注意，如果有引号字符串（位于 + 左侧）连接无引号字符串，运算结果是有引号的，
相反，无引号字符串（位于 + 左侧）连接有引号字符串，运算结果则没有引号
p {cursor: e + -resize;} //编译后 p {cursor: e-resize; }
p:before {
content: "Foo " + Bar;
font-family: sans- + "serif";}
// 编译为
p:before {
content: "Foo Bar";
font-family: sans-serif; }
4.复用
继承是基于类class的（有时是基于其他类型的选择器）
允许一个选择器，继承另一个选择器。比如，现有class1：
.class1 {
border: 1px solid #ddd;}
// class2要继承class1，就要使用@extend命令：
.class2 {
@extend .class1;
font-size:120%;
}
// 使用@mixin命令，定义一个代码块。
@mixin left {
float: left;
margin-left: 10px;
}
//使用@include命令，调用这个mixin。
div {
@include left;
}
// mixin的强大之处，在于可以指定参数和缺省值。
@mixin left($value: 10px) {
float: left;
margin-right: $value;
}
// 使用的时候，根据需要加入参数：
div {
@include left(20px);
}
5.插入
@import "foo.scss"; //都会导入文件 foo.scss
@import "foo"; //都会导入文件 foo.scss
@import "http://foo.com/bar"; // 插入外部文件
@import "foo.css"; // 等同于css的import命令。
