Sass继承/扩展用法详解

在Sass中, @ extend用于将一组CSS属性从一个选择器共享到另一个选择器。这是Sass的非常重要和有用的功能。

Sass的@extend功能允许类彼此共享一组属性。在将许多类放在一起的复杂CSS中, 可能会发生属性重复。 @extend功能使你的代码更少, 并方便你重复重写。

让我们以一个示例来演示@extend功能。在这里, 我们为错误, 警告和成功创建了一系列简单的消息传递。

SCSS语法：

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
.success {
  @extend .message;
  border-color: green;
}
.error {
  @extend .message;
  border-color: red;
}
.warning {
  @extend .message;
  border-color: yellow;
}

等效的Sass语法：

.message
  border: 1px solid #ccc
  padding: 10px
  color: #333
.success
  @extend .message
  border-color: green
.error
  @extend .message
  border-color: red
.warning
  @extend .message
  border-color: yellow

处理以上代码后, 它将采用.message中的CSS属性并将其应用于.success, .error和.warning。生成的CSS使你避免在HTML元素上编写多个类名。看起来像这样：

CSS语法：

.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}
.success {
  border-color: green;
}
.error {
  border-color: red;
}
.warning {
  border-color: yellow;
}