Sass 继承/ Extend

2024年8月29日 | 1 分钟阅读

在 Sass 中,@extend 用于从一个选择器向另一个选择器共享一组 CSS 属性。这是 Sass 中一个非常重要且有用的特性。

Sass 的 @extend 特性允许类之间共享一组属性。在将许多类组合在一起的复杂 CSS 中,可能会出现属性重复。@extend 特性使您的代码更少,并方便您重复编写。

让我们举一个例子来演示 @extend 特性。在这里,我们为错误、警告和成功创建了一系列简单的消息。

SCSS 语法

等效 Sass 语法

处理完上面的代码后,它会将 .message 中的 CSS 属性应用于 .success、.error 和 .warning。生成的 CSS 方便您避免在 HTML 元素上编写多个类名。它看起来像这样

CSS 语法