共计 1340 个字符,预计需要花费 4 分钟才能阅读完成。
本节咱们学习 Sass 中的嵌套,嵌套大家应该不生疏,在 HTML 中就反对标签的嵌套。Sass 中容许一个 CSS 款式嵌套进另一个款式中,内层款式仅实用于外层款式的选择器范畴内。
示例:
例如上面这段 CSS 代码:
.big {color: #ccc;}
.big .small {font-size: 14px;}
如果咱们要应用 Sass 中的嵌套语法来写,如下所示:
image
从上图咱们能够看到,嵌套的语法其实很简略,相较于 CSS 语言中后辈选择器的写法,嵌套规定看起来要直观很多。
应用 Sass 嵌套来写代码,能够缩小父类选择器的反复,不过须要留神的是,咱们最好不要嵌套太多层选择器,因为嵌套层数越多性能越低。个别咱们在理论利用中,嵌套三层左右就差不多啦。
援用父选择器 &
在嵌套 CSS 规定时,有时候咱们须要间接应用到嵌套外层的父选择器,比方当给某一个元素设定 hover
款式时或者是当 body
元素有个 classname
时,能够用 &
符号来示意嵌套规定外层的父选择器。
示例:
例如上面这段代码:
a {
color: #ccc;
font-size: 12px;
}
a:hover {color: #000;}
咱们能够这样写:
image
上图中 &
符号被解析为选择器 a
,即父选择器。个别 &
符号是呈现在选择器的后面地位,例如上述代码中的 &:hover
。
除此之外,咱们也能够在 &
符号前面增加一些后缀,示意在父选择器名称的根底上组合成新的选择器名称。
示例:
例如上面这段代码中,选择器名称的前缀都一样:
.top {background-color: #ccc;}
.top-div {font-size: 14px;}
.top-p {color: #000;}
.top-p__span {font-size: 12px;}
那咱们就能够将这些前缀都应用 &
代替:
image
嵌套属性
许多 CSS 属性具备雷同的前缀,例如 font-family
和 font-size
、font-weight
、font-style
等,这些属性遵循雷同的命名空间,即 font
。为了便于管理这样的属性,同时也为了防止反复输出,Sass 容许将属性嵌套在命名空间中。要实现属性的嵌套,只须要在命名空间前面加上一个冒号 :
即可。
示例:
咱们来看一个例子:
.top {
font-size: 14px;
font-weight: bold;
font-style: normal;
}
例如下面这段代码中,如果咱们应用 Sass 来写,只须要在 .top
选择器中,在 font
命名空间前面加上一个 :
冒号,而后将其余属性应用花括号括起来,外面的属性就能够不必写 font-
前缀局部了。如下图:
image
占位符选择器 %foo
Sass 额定提供了一种非凡类型的选择器,叫做占位符选择器 (placeholder selector),它与罕用的 id
与 class
选择器写法类似,只是将 #
或 .
替换成了百分号 %
,而后通过 @extend
来应用。如果不应用 @extend
指令,则无奈在 CSS 中显示后果。
示例:
%xkd{color: #000;}
.box{
@extend %xkd;
font-size:14px;
}
编译成 CSS 代码:
.box {color: #000;}
.box {font-size: 14px;}
上述代码中,@extend
指令容许一个选择器继承另一个选择器中的款式。