Sass 继承/扩展
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;
}
