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元素上编写多个类名。看起来像这样：
【Sass继承/扩展用法详解】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; }