SCSS @extend 指令详解

在使用SCSS（Sassy CSS）进行样式开发时，@extend指令是非常有用的功能之一。它可以让我们实现样式的复用，避免重复编写样式代码，从而提高开发效率。本文将详细介绍@extend指令的用法和注意事项。

什么是@extend指令

@extend指令是SCSS中的一种复用样式的方式，它允许一个选择器继承另一个选择器的样式。通过@extend指令，我们可以避免重复编写相似的样式代码，提高样式的可维护性。

@extend指令的基本语法

@extend指令的基本语法如下所示：

%placeholder {
   // 样式代码
}

.selector {
   @extend %placeholder;
}

在上面的语法中，“%placeholder”是一个占位符，表示一组样式代码。在“selector”的样式中使用@extend %placeholder;即可继承“%placeholder”中的样式。

@extend指令的应用示例

下面通过一个具体的示例来演示@extend指令的应用。

%button {
  padding: 10px 20px;
  background-color: #4285f4;
  color: #fff;
  border-radius: 5px;
}

.button-primary {
  @extend %button;
}

.button-secondary {
  @extend %button;
  background-color: #34a853;
}

.button-danger {
  @extend %button;
  background-color: #ea4335;
}

.button-warning {
  @extend %button;
  background-color: #fbbc05;
}

在上面的示例中，“%button”被定义为一个占位符，包含了通用的按钮样式。然后分别定义了不同类型的按钮样式，通过@extend指令继承了“%button”中的样式，并可以覆盖部分样式。