首页技术文章正文

Web前端培训:Sass嵌套的使用方式

更新时间:2022-12-19 来源:黑马程序员 浏览量:

IT培训班

  尽管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 }


分享到:
在线咨询 我要报名
和我们在线交谈!