属性嵌套

属性嵌套 (Nested Properties)

有些 CSS 属性遵循相同的命名空间，比如 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; 
}

命名空间也可以包含自己的属性值，例如：

.funky {
  font: 20px/24px {
    family: fantasy;
    weight: bold;
  }
}

编译为

.funky {
  font: 20px/24px;  // 字体大小20px，行高24px
  font-family: fantasy;
  font-weight: bold;
}

变量 

// 定义
$width: 5em;

// 使用
#main {
  width: $width;
}

变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。

将局部变量转换为全局变量可以添加 !global 声明：

#main {
  $width: 5em !global;
  width: $width;
}

#sidebar {
  width: $width;
}

编译为

#main {
  width: 5em;
}

#sidebar {
  width: 5em;
}