嵌套规则 (Nested Rules)

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

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

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

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

#main {  color: black;  &-sidebar { border: 1px solid; }}编译为:#main {  color: black; }  #main-sidebar {    border: 1px solid; }

 属性嵌套 (Nested Properties)

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

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

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

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

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

变量 $ (Variables: $)

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

$width: 5em;直接使用即调用变量：#main {  width: $width;}

数据类型 (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 文件中，只需要用 #{} 插值语句将变量包裹。

p {  $font-size: 12px;  $line-height: 30px;  font: #{$font-size}/#{$line-height};}编译为p {  font: 12px/30px; }

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

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

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