Sass

嵌套规则 (Nested Rules)

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

1#main p {
2  color: #00ff00;
3  width: 97%;
4
5  .redbox {
6    background-color: #ff0000;
7    color: #000000;
8  }
9}
10
11编译后
12#main p {
13  color: #00ff00;
14  width: 97%; }
15
16  #main p .redbox {
17    background-color: #ff0000;
18    color: #000000; }

父选择器 & (Referencing Parent Selectors: &)

使用&字符，编译后会与父选择器连接起来

1#main {
2  color: black;
3  &-sidebar { border: 1px solid; }
4}
5
6编译为:
7#main {
8  color: black; }
9
10  #main-sidebar {
11    border: 1px solid; }

属性嵌套 (Nested Properties)

1.funky {
2
3  font: {
4
5    family: fantasy;
6
7    size: 30em;
8
9    weight: bold;
10
11  }
12
13}
14
15编译为
16
17.funky {
18
19  font-family: fantasy;
20
21  font-size: 30em;
22
23  font-weight: bold; }

占位符选择器 %foo (Placeholder Selectors: %foo)

当占位符选择器单独使用时（未通过 @extend 调用），不会编译到 CSS 文件中，一种继承方式。

(占位符%)有时，需要定义一套样式并不是给某个元素用，而是只通过 @extend 指令使用，尤其是在制作 Sass 样式库的时候，希望 Sass 能够忽略用不到的样式。

1// This ruleset won't be rendered on its own.
2#context a%extreme {
3  color: blue;
4  font-weight: bold;
5  font-size: 2em;
6}
7
8占位符选择器需要通过延伸指令使用，用法与 class 或者 id 选择器一样，被延伸后，占位符选择器本身不会被编译。
9
10.notice {
11  @extend %extreme;
12}
13
14编译为
15#context a.notice {
16  color: blue;
17  font-weight: bold;
18  font-size: 2em; }

变量 $ (Variables: $)

SassScript 最普遍的用法就是变量，变量以美元符号开头，赋值方法与 CSS 属性的写法一样。不在嵌套规则内定义的变量则可在任何地方使用（全局变量），将局部变量转换为全局变量可以添加 !global 声明

1$width: 5em;
2
3直接使用即调用变量：
4
5#main {
6  width: $width;
7}

数据类型 (Data Types)

SassScript 支持 6 种主要的数据类型：

· 数字，1, 2, 13, 10px

· 字符串，有引号字符串与无引号字符串，"foo", 'bar', baz

· 颜色，blue, #04a3f9, rgba(255,0,0,0.5)

· 布尔型，true, false

· 空值，null

· 数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif

· maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)

运算 (Operations)

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

SassScript 支持数字的加减乘除、取整等运算 (+, -, *, /, %)，如果必要会在不同单位间转换值。

如果需要使用变量，同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中，只需要用 #{} 插值语句将变量包裹。

1p {
2  $font-size: 12px;
3  $line-height: 30px;
4  font: #{$font-size}/#{$line-height};
5}
6
7编译为
8
9p {
10  font: 12px/30px; }

插值语句 #{} (Interpolation: #{})

通过 #{} 插值语句可以在选择器或属性名中使用变量：

1p.#{$name} {
2  #{$attr}-color: blue;
3}