📅 最后修改于: 2020-12-25 03:55:57 🧑 作者: Mango
在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;
}