【css】增强 CSS 的复用性与灵活性的Mixins

可以通过 SCSS 的 @extend 指令或者使用混合器（mixin）来让 .qs-item-value 复用 .qctc-single-label 的样式。以下是两种方法的实现：

使用 @extend 指令

scss

.qctc-single-label {position: absolute;top: 60%;left: 50%;transform: translateX(-50%);color: white;text-shadow: 0 0 5px rgba(0,0,0,0.5);
}.qs-item-value {@extend .qctc-single-label;// 可以在这里添加其他独有的样式
}

使用混合器（mixin）

scss

@mixin label-style {position: absolute;top: 60%;left: 50%;transform: translateX(-50%);color: white;text-shadow: 0 0 5px rgba(0,0,0,0.5);
}.qctc-single-label {@include label-style;
}.qs-item-value {@include label-style;// 可以在这里添加其他独有的样式
}

两种方法的主要区别在于：

• @extend 会将 .qctc-single-label 的样式规则合并到 .qs-item-value 中，生成的 CSS 会更简洁。
• 混合器（mixin）会在使用 @include 的地方复制一份样式代码，适合需要传递参数的场景。

你可以根据具体需求选择合适的复用方式。

在混合器中使用变量

SCSS中的`@extend`和混合器有什么区别？