深圳市龙岗区横岗顺成发吸塑厂

今天小编跟大家讲解下有关Sass 嵌套 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关Sass 嵌套 的相关资料，希望小伙伴们看了有所帮助。

嵌套规则

Sass 允许我们将以与html相同的方式嵌套css选择器，将一套 css 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器，比如：

// .scss语法 #main { width: 97%; p, div { font-size: 2em; a { font-weight: bold; } } pre { font-size: 3em; } } // 编译为.css #main { width: 97%; } #main p, #main div { font-size: 2em; } #main p a, #main div a { font-weight: bold; } #main pre { font-size: 3em; }

嵌套功能避免了重复输入父选择器，而且也使得复杂的 css 结构更加便于管理。

注意：在Sass中，ul、li和a选择器嵌套是在nav选择器中的，在css中，规则时逐个定义的（不是嵌套的）。

父选择器 &

在嵌套 css 规则时，有时候我们需要直接使用到嵌套外层的父选择器，比如，当给某一个元素设定 hover 样式时或者是当 body 元素有个 classname 时，可以用 & 代表嵌套规则外层的父选择器。

嵌套属性

许多css属性具有相同的前缀 ，比如font-family，font-size，font-weight，text-align，text-transform，text-overflow前三者和后三者分别是以font和text作为属性的命名空间，为了便于管理这样的属性，同时也为了避免重复输入，Sass 允许将属性嵌套在命名空间中。

// .scss 语法 font: { family: Helvetica, sans-serif; size: 24px; weight: bold; } text: { align: center; transform: lowercase; overflow: hidden; } // 编译后的普通css font-family: Helvetica, sans-serif; font-size: 24px; font-weight: bold; text-align: center; text-transform: lowercase; text-overflow: hidden;占位符选择器 %foo

Sass 额外提供了一种特殊类型的选择器：占位符选择器 (placeholder selector)，它与常用的id与class选择器写法相似，只是#或.替换成了%，[email protected]

来源：爱蒂网