Sass嵌套

尽管Sass可以把反复使用的CSS属性值定义成变量，但是为了完善Sass的功能，Sass基于变量提供了更为强大的工具，即规则嵌套。只有当Sass变量与规则嵌套一起使用时，才能发挥其更大的作用。下面将为大家讲解规则嵌套的使用方式。

在使用CSS编写代码时，我们知道重复写选择器是非常烦琐的。例如，要写一大串指向页面中同一块的样式时，往往需要一遍又一遍地写同一个ID来实现，如下所示。

#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

为了解决重复书写ID选择器的问题。Sass可以只写一遍来实现，具体代码如下。

#content {
 article {
  h1 { color: #333 }
  p { margin-bottom: 1.4em }
 }
 aside { background-color: #EEE }
}

上述代码中，Sass在编译输出CSS时会自动把这些嵌套规则处理好，避免代码的重复书写，且使样式的可读性更高。编译后的代码如下。

#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }