- sass允许将一套CSS样式嵌套进另一套样式中。
【目的】:避免了重复输入父选择器,结构看起来更清晰并且易于管理。
其中:
(1)内层的样式将它外层的选择器作为父选择器
(2)&将被替换成嵌套外层的父选择器,如果含有多层嵌套,最外层的父选择器会一层一层向下传递。&所在的位置只代表了他的父亲,也就是说在每一层,指向是都是他所在的父元素。
#app {
h1 {
text-align: center;
&:hover {
color: red;
}
}
&:hover {
text-decoration: underline;
}
}
等同于
#app h1 {
text-align: center;
}
/*#app中的h1应用了text-align样式*/
#app h1:hover {
text-align: center;
}
#app:hover {
text-decoration: underline;
}
(3)属性嵌套
有些 CSS 属性遵循相同的命名空间 (namespace),比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性,同时也为了避免了重复输入,Sass 允许将属性嵌套在命名空间中,例如
.funky {
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}
/*编译后*/
.funky {
font-family: fantasy;
font-size: 30em;
font-weight: bold;
}
参考:Scss中的嵌套规则