SCSS Extend|极客教程

SCSS Extend

SCSS (Sassy CSS) 是在 CSS 语法基础上增加了一些功能和特性的 CSS 预处理器。其中的 @extend 指令允许样式规则“继承”另一个选择器的样式规则。通过使用 @extend，可以减少重复的样式代码，提高代码的可维护性和可读性。

语法

@extend 的基本语法如下：

.selector {
  property: value;
  @extend .another-selector;
}

在上面的代码中，.selector 中的样式将会继承 .another-selector 中的样式。

使用场景

1. 继承公用样式

一个常见的使用场景是将多个选择器中相同的样式提取出来，定义为一个公用的样式，然后通过 @extend 继承公用样式。

%common-style {
  background-color: #f8f8f8;
  color: #333;
}

.header {
  @extend %common-style;
}

.footer {
  @extend %common-style;
}

在上面的代码中，.header 和 .footer 选择器都继承了 %common-style 中定义的公用样式。

2. 继承媒体查询

@extend 也可以用于继承媒体查询。例如：

%mobile {
  @media (max-width: 768px) {
    @content;
  }
}

.element {
  @extend %mobile {
    color: blue;
  }
}

上面的代码中，.element 选择器将会在屏幕宽度小于等于 768px 时应用颜色为蓝色的样式。

注意事项

1. 继承的样式必须在被继承的样式之后定义

在 SCSS 中，@extend 指令必须在被继承的样式规则之后定义。否则会出现编译错误。

.error {
  color: red;
}

.success {
  @extend .error;
  color: green; // 这里会有编译错误
}

2. 只能继承一个选择器

SCSS 中的 @extend 是单向的，一个选择器只能继承一个选择器的样式。

3. V.S. Mixin

虽然 @extend 和 mixin 都可以实现样式的复用，但它们之间有一些区别。@extend 会直接将被继承的样式合并到当前样式中，而 mixin 则是将 mixin 中的样式插入到调用 mixin 的地方。

示例

下面是一个使用 @extend 的示例代码：

%button-style {
  padding: 10px 20px;
  border: 1px solid #333;
  background-color: #f8f8f8;
  color: #333;
  text-align: center;
  cursor: pointer;
}

.button {
  @extend %button-style;
}

.button-primary {
  @extend %button-style;
  background-color: #007bff;
  color: white;
}

.button-secondary {
  @extend %button-style;
  background-color: #28a745;
  color: white;
}

.button-disabled {
  @extend %button-style;
  background-color: #ccc;
  color: #666;
  cursor: not-allowed;
}

在上面的示例代码中，.button、.button-primary、.button-secondary 和 .button-disabled 选择器都继承了 %button-style 中定义的公用样式。