本节我们学习 Sass 中的延伸,也可以理解为继承。在 Sass 中,我们可以通过 @extend 指令来实现将一个选择器中的样式继承到另一个选择器中。特别是当选择器中样式几乎差不多,只有一点区别的时候,使用 @extend 就很有用啦。

延伸的使用

下面我们来通过一个例子看一下延伸的具体使用。

例如我们在网页中是不是经常会看到有不同颜色的按钮呀,这些按钮除了背景颜色不同,其他样式都几乎一样。这种情况下,我们肯定不会重复定义多个样式,而是单独定义一个公共样式,再分别定义不同颜色样式属性。

示例

例如我们通过继承来创建三个不同颜色的按钮,分别为红色、绿色、蓝色:

.btn {
    width: 100px;
    height: 40px;
    border-radius: 5px;
    border: none;
    color: #fff;
}
.red-btn{
    @extend .btn;
    background-color: red;
}
.green-btn{
    @extend .btn;
    background-color: green;
}
.blue-btn {
    @extend .btn;
    background-color: blue;
}

我们首先定义了一个 .btn 选择器,这个选择器中是所有按钮的共用样式。然后我们根据需要分别定义了三个不同背景颜色的样式,来继承这个 .btn 选择器,这需要使用到 @extend 指令。在 Sass 中,同一个选择器可以延伸给多个选择器,它所包含的属性将继承给所有被延伸的选择器。

然后我们可以看一下编译后的 CSS 代码,如下所示:

.btn, .red-btn, .green-btn, .blue-btn {
  width: 100px;
  height: 40px;
  border-radius: 8px;
  border: none;
  color: #fff;
  font-size: 16px;
}
.red-btn {
  background-color: red;
}
.green-btn {
  background-color: green;
}
.blue-btn {
  background-color: blue;
}

HTML 部分的代码如下所示:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Sass学习(9xkd.com)</title>
        <link rel="styleSheet" type="text/css" href="./style.css">
    </head>
    <body>
        <div>
            <button class="red-btn">红色按钮</button>
            <button class="green-btn">绿色按钮</button>
            <button class="blue-btn">蓝色按钮</button>
        </div>
    </body>
</html>

在浏览器中的演示效果:

当然如果是在 CSS 中,没有延伸,我们也可以实现上述效果,只需要在 HTML 标签中添加一个 .btn 选择器即可。

<button class="btn red-btn">红色按钮</button>
<button class="btn green-btn">绿色按钮</button>
<button class="btn blue-btn">蓝色按钮</button>

延伸复杂的选择器

在 Sass 中,除了可以延伸类选择器,Sass 还允许延伸任何定义给单个元素的选择器。

示例:

例如我们可以在一个样式类中延伸 a:hover

a:hover{
    color: #eb8258;
}
.xkd{
    @extend a:hover;
    font-size: 14px;
}

编译成 CSS 代码:

a:hover, .xkd {
  color: #eb8258;
}

.xkd {
  font-size: 14px;
}

继续延伸

当一个选择器延伸给第二个选择器后,可以继续将第二个选择器延伸给第三个选择器。

示例:
.one{
    font-size: 14px;
}
.two{
    @extend .one;
    color: #ccc;
    border: 1px solid #000;
}
.three{
    @extend .two;
    background-color: #fefefe;
}

编译成 CSS 样式:

.one, .two, .three
  font-size: 14px;
}

.two, .three {
  color: #ccc;
  border: 1px solid #000;
}

.three {
  background-color: #fefefe;
}

我们使用 .two 选择器继承 .one 选择器,这样 .two 中就有了 .one 选择器中的样式。然后又使用 .three 继承 .two 选择器,这样 .three 同时有了 .one.two 选择器中的样式。

06-14 23:08