什么是SASS中的@extend指令？|极客笔记

什么是SASS中的@extend指令？

SASS是一种流行的CSS预处理器，可以让编写CSS变得更加简便、易读。SASS的@extend指令可以让我们轻松重用CSS规则，并使代码更加简洁可维护。在本文中，我们将讨论SASS中的@extend指令的含义、用法和示例。

含义

@extend指令是SASS中特有的一种指令，用于继承已有的CSS规则。我们可以把@extend视为CSS规则的“复制器”，让一个CSS规则与另一个CSS规则共享属性。

用法

@extend指令的使用方法如下：

.selector {
  // CSS规则
}

.another-selector {
  @extend .selector;
}

在上面的例子中，我们在.selector中定义了一些CSS规则，然后在.another-selector中使用@extend指令继承了.selector的属性。这意味着，.another-selector将会继承.selector中定义的所有CSS规则，并且不需要重复编写相同的代码。

示例

考虑下面的HTML：

<div class="box1"></div>
<div class="box2"></div>

现在，我们将编写SASS，通过@extend指令来为这两个块添加相同的样式：

.box {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin: 10px;
}

.box1 {
  @extend .box;
}

.box2 {
  @extend .box;
}

在上面的例子中，我们定义了一个名为.box的CSS规则类，并使用@extend指令来为.box1和.box2添加相同的规则。这样，.box1和.box2就都继承了.box中定义的CSS规则，而不需要重复编写。

继承复杂样式

SASS的@extend指令也可以用于继承具有多个属性和伪类的样式。例如，考虑下面的例子：

.btn {
  padding: 10px;
  border: 1px solid #ccc;
  color: #333;
  &:hover {
    background-color: #ccc;
  }
}

.btn-primary {
  @extend .btn;
  background-color: blue;
  color: #fff;
  &:hover {
    background-color: darkblue;
  }
}

在上面的例子中，我们定义了一个名为.btn的CSS规则类，该类包含了padding、border、color和:hover伪类处的CSS规则。然后，我们通过@extend指令为.btn-primary添加这些相同的规则，并加上一些额外的规则。这样，我们就能比较容易地重用CSS规则，同时也能使CSS更加易读、清晰。