样式的嵌套

发布时间：2023-05-25 13:46:48 所属栏目：教程来源：

导读：Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器，我们用编写一个导航的样式来举例，假定我们的导航 nav 下面有 ul 标签，ul 标签下又有 li 标签，li 标签下呢又有 a 标签，下

Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器，我们用编写一个导航的样式来举例，假定我们的导航 nav 下面有 ul 标签，ul 标签下又有 li 标签，li 标签下呢又有 a 标签，下面我使用 Sass 来处理导航中的样式：

nav {
width:200px;
background:white;
ul {
width:100%;
background:red;
li {
width:100%;
background:blue;
a {
color:green;
font-size:px;
}
}
}
}
我们可以看到在上面的代码中，我们在 nav 的样式规则中，可以直接通过选择器去编写另外一套样式规则，并且可以一直嵌套，这段代码将会被编译成如下的 CSS ：

nav {
width: px;
background: white;
}
nav ul {
width: ;
background: red;
}
nav ul li {
width: ;
background: blue;
}
nav ul li a {
color: green;
font-size: px;
}
写起来是不是方便很多，但使用嵌套的时候同时需要注意：

嵌套规则很有用很方便，但是你很难想象它实际会生成多少 CSS 语句，嵌套的越深，那么编译为 CSS 的语句就越多，同时消耗的资源也会越多，所以开发者尽量不要嵌套特别深的层级！

嵌套选择器列表 (Selector Lists)

嵌套规则可以很方便的处理选择器列表，由逗号分隔的选择器列表会被 Sass 组合到一个选择器列表中，我们举个例子看下：

.alert, .warning {
ul, p {
margin-right: ;
margin-left: ;
padding-bottom: ;
}
}
上面这种写法会被转为如下的 CSS 代码：

.alert ul, .alert p, .warning ul, .warning p {
margin-right: ;
margin-left: ;
padding-bottom: ;
}

嵌套组合符选择器 (Selector Combinators)

如果你对选择符很陌生的话，一定要先看下什么是 CSS 选择符

我们还可以嵌套使用带有选择符的选择器，我们可以将选择符放在外部选择器的末尾，或者内部选择器的开始位置，这里我们举一个官网的例子：

ul > {
li {
list-style-type: none;
}
}
h2 {
+ p {
border-top: px solid gray;
}
}
p {
~ {
span {
opacity: ;
}
}
}
上面这种写法会被转换为如下的 CSS 代码：

ul > li {
list-style-type: none;
}
h2 + p {
border-top: px solid gray;
}
p ~ span {
opacity: ;
}

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!