Scss (Sassy CSS)，一款css预处理语言，SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。SCSS 需要使用分号和花括号而不是换行和缩进。SCSS 对空白符号不敏感，其实就和css3语法一样，其后缀名是分别为 .scss。

一、CSS 功能拓展

1、允许嵌套
允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器，例如：

.main p {color: #00ff00;width: 97%;.redbox {background-color: #ff0000;color: #000000;}
}

2、父选择器 &
在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，例如，当给某个元素设定 hover 样式时，或者当 body 元素有某个 classname 时，可以用 & 代表嵌套规则外层的父选择器。

a {font-weight: bold;text-decoration: none;&:hover { text-decoration: underline; }body.firefox & { font-weight: normal; }
}
// 编译为
a {font-weight: bold;text-decoration: none; 
}
a:hover {text-decoration: underline;
}
body.firefox a {font-weight: normal;
}

3、属性嵌套
有些 CSS 属性遵循相同的命名空间 (namespace)，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性，同时也为了避免了重复输入，Sass 允许将属性嵌套在命名空间中，例如：

.funky {font: {family: fantasy;size: 30em;weight: bold;}
}
//编译为
.funky {font-family: fantasy;font-size: 30em;font-weight: bold;
}

4、占位符选择器 %
Sass 额外提供了一种特殊类型的选择器：占位符选择器 (placeholder selector)。与常用的 id 与 class 选择器写法相似，只是 # 或 . 替换成了 %。必须通过 @extend 指令调用。（在下面@extend模块举例子）

二、注释 /* */ 与 //

支持标准的 CSS 多行注释 /* */，以及单行注释 //，前者会 被完整输出到编译后的 CSS 文件中，而后者则不会

/* This comment is* several lines long. */
body { color: black; }// These comments are only one line long each.
a { color: green; }//编译为/* This comment is* several lines long. */
body { color: black; }
a { color: green; }

三、SassScript

1、变量 $
SassScript 最普遍的用法就是变量，变量以美元符号开头，赋值方法与 CSS 属性的写法一样：

$width: 5em;
.main {width: $width;
}
// 编译为
.main {width: 5em;
}

2、运算
所有数据类型均支持相等运算 == 或 !=，此外，每种数据类型也有其各自支持的运算方式。

p { width: 1in + 8pt; }
// 编译为
p { width: 1.111in; }

p {font: 10px/8px;             // Plain CSS, no division$width: 1000px;width: $width/2;            // Uses a variable, does divisionwidth: round(1.5)/2;        // Uses a function, does divisionheight: (500px/2);          // Uses parentheses, does divisionmargin-left: 5px + 8px/2px; // Uses +, does division
}
//编译为
p {font: 10px/8px;width: 500px;height: 250px;margin-left: 9px;
}

p { color: #010203 + #040506; }
// 计算 01 + 04 = 05 02 + 05 = 07 03 + 06 = 09，然后编译为
p { color: #050709; }p { color: #010203 * 2; }
// 计算 01 * 2 = 02 02 * 2 = 04 03 * 2 = 06，然后编译为
p { color: #020406; }

p { margin: 3px + 4px auto; }
// 编译为
p { margin: 7px auto; }p:before { content: "I ate #{5 + 10} pies!"; }
//编译为
p:before { content: "I ate 15 pies!"; }$value: null;
p:before { content: "I ate #{$value} pies!"; }
// 空的值被视作插入了空字符串，编译为
p:before { content: "I ate pies!"; }

3、圆括号

p { width: 1em + (2em * 3); }
// 编译为
p { width: 7em; }

四、@-Rules 与指令

1、@import

@import "foo.scss"; //引入外部样式

假设 example.scss 文件包含以下样式：

.example { color: red; }

然后导入到 #main 样式内

#main { @import “example”; }

将会被编译为

#main .example { color: red; }

2、@media

.sidebar { width: 300px; @media screen and (orientation:
landscape) {
width: 500px; } }

3. @extend继承

五、控制指令

1、@if
当 @if 的表达式返回值不是 false 或者 null 时，条件成立，输出 {} 内的代码：

p {@if 1 + 1 == 2 { border: 1px solid; }@if 5 < 3 { border: 2px dotted; }@if null  { border: 3px double; }
}
// 编译为
p { border: 1px solid; }

@if 声明后面可以跟多个 @else if 声明，或者一个 @else 声明。如果 @if 声明失败，Sass 将逐条执行 @else if 声明，如果全部失败，最后执行 @else 声明，例如：

$type: monster;
p {@if $type == ocean {color: blue;} @else if $type == matador {color: red;} @else if $type == monster {color: green;} @else {color: black;}
}
//编译为
p { color: green; }

2、@for

@for $i from 1 through 3 {.item-#{$i} { width: 2em * $i; }
}
//编译为
.item-1 { width: 2em; }
.item-2 { width: 4em; }
.item-3 { width: 6em; }