关于css:Sass-嵌套规则

37次阅读

共计 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-familyfont-sizefont-weightfont-style 等,这些属性遵循雷同的命名空间,即 font。为了便于管理这样的属性,同时也为了防止反复输出,Sass 容许将属性嵌套在命名空间中。要实现属性的嵌套,只须要在命名空间前面加上一个冒号 : 即可。

示例:

咱们来看一个例子:

.top {
  font-size: 14px;
  font-weight: bold;
  font-style: normal;
} 

例如下面这段代码中,如果咱们应用 Sass 来写,只须要在 .top 选择器中,在 font 命名空间前面加上一个 : 冒号,而后将其余属性应用花括号括起来,外面的属性就能够不必写 font- 前缀局部了。如下图:

image

占位符选择器 %foo

Sass 额定提供了一种非凡类型的选择器,叫做占位符选择器 (placeholder selector),它与罕用的 idclass 选择器写法类似,只是将 #. 替换成了百分号 %,而后通过 @extend 来应用。如果不应用 @extend 指令,则无奈在 CSS 中显示后果。

示例:
%xkd{color: #000;}
.box{
    @extend %xkd;
    font-size:14px;
} 

编译成 CSS 代码:

.box {color: #000;}

.box {font-size: 14px;} 

上述代码中,@extend 指令容许一个选择器继承另一个选择器中的款式。

正文完
 0