Web前端培训：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 }