什么是 Sass 继承
发布时间:2023-05-26 13:36:30 所属栏目:教程 来源:
导读:继承,我们也叫做代码重用,在 Sass 中支持对样式进行继承。
语法详情
首先我们看一段代码,看看在 Sass 中的继承是长什么样子的:
.a {
width: px;
}
.b {
@extend a;
height: px;
color: r
语法详情
首先我们看一段代码,看看在 Sass 中的继承是长什么样子的:
.a {
width: px;
}
.b {
@extend a;
height: px;
color: r
继承,我们也叫做代码重用,在 Sass 中支持对样式进行继承。 语法详情 首先我们看一段代码,看看在 Sass 中的继承是长什么样子的: .a { width: px; } .b { @extend a; height: px; color: red; } 从上面的代码中可以看见,我在 .b 的样式中使用 @extend 继承了 .a 的样式,那么这段代码转换为 CSS 如下: .a, .b { width: px; } .b { height: px; color: red; } 上面的代码中我们看到了 Sass 中继承的样子,它的写法是 @extend selector 也就是在 @extend 后面跟一个选择器,表示继承这个选择器的样式,下面我们详细讲解下它的语法。 @extend 会包含包含扩展的样式规则,同时在 Sass 中它会确保复杂的选择器是交错的,这样无论你的 DOM 元素是如何嵌套的它都能保证正常工作。它还可以根据实际情况将选择器组合在一起,可以更智能的处理选择器以及包含伪类的选择器。我们举个稍复杂点的例子来看下: .a { width: px; height: px; background-color: orange; &:hover { background-color: green; } .link { width: ; height: ; color: red; &:active { color: blue; } i { font-size: px; font-weight: ; } } } .b { @extend a; width: px; height: px; } 我们仔细解读上面的代码,我为 .a 写了一大堆的样式,包括它的子元素以及它的伪类;而 .b 下面有同样的子元素,同样的伪类别,只是宽高不同,那么我直接在 .b 中继承 .a 的样式,它会转换为什么样子的代码呢?它转换为 CSS 的代码如下: .a, .b { width: px; height: px; background-color: orange; } .a:hover, .b:hover { background-color: green; } .a .link, .b .link { width: ; height: ; color: red; } .a .link:active, .b .link:active { color: blue; } .a .link i, .b .link i { font-size: px; font-weight: ; } .b { width: px; height: px; } 从上面转换成 CSS 的代码我们可以看出,引用相同样式的部分都以逗号做了分隔,在 CSS 中使用逗号的含义你应该很了解,继承 @extend 就可以为你自动创建这些组合,提取相同的样式,所以如果有选择器使用了相同的样式,请使用继承的方式来实现! 占位符选择器 在 Sass 中有一种特殊的选择器叫占位符选择器,它的写法像我们写的 id 或 class 选择器一样,只不过占位符选择器是以 % 开头的。在 Sass 中你单独使用这种选择器是不会转换为 CSS 的,只能是通过 @extend 来使用。 比如说有时候你想编写一个可扩展的样式,然后在各处继承它,你就可以使用占位符选择器,我们结合实际的例子来看下: %placeholder { Box-sizing: border-Box; border-top: px #666666 solid; width: ; &:hover { border: px #999999 solid; } &:active {color: blue;} } .buttons { @extend placeholder; color: #4285f4; } .btn { @extend placeholder; } 从上面的代码中看到,我通过占位符选择器 %placeholder 定义了一堆样式,然后在其他的样式表中继承它,这个告诉你一个简单的理解方式,占位符选择器你就理解为一个虚拟的选择器,这个名是不会编译到 CSS 中的,最终编译出的选择器名是根据你使用继承的选择器名来定的。上面这段代码会转化为如下的 CSS 代码: .btn, .buttons { Box-sizing: border-Box; border-top: px #666666 solid; width: ; } .btn:hover, .buttons:hover { border: px solid; } .btn:active, .buttons:active { color: blue; } .buttons { color: #4285f4; } 从上面的代码中可以看到,编译成 CSS 后 %placeholder 这个选择器不见了,但它的样式被继承了,这就是占位符选择器结合继承 @extend 的用法。 在 @media 中使用 @extend 如果你需要在 @media 中使用继承,一定要注意使用方式!如果你在外部定义样式,然后在 @media 内部继承外部的样式,Sass 是会报错的。我们首先举个错误的例子看下: .error { border: px red solid; background-color: red; } @media screen and (max-width: px) { .btn-error { @extend error; } } 如上面的代码所示,这样的写法在 Sass 中是会报错的,也不会编译成功。 Sass 规定继承只能在给定的媒体上下文中使用,所以正确的写法如下: @media screen and (max-width: px) { .error { border: px red solid; background-color: red; } .btn-error { @extend error; } } 上面这个正确的写法将会被编译为如下的 CSS 代码: @media screen and (max-width: 600px) { .error, .btn-error { border: px red solid; background-color: red; } } 在 @media 中使用继承,一定要注意写法! (编辑:汽车网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |