在 scss 中重用另一个类的特定属性答案

【问题标题】：Reuse just specific property of another class in scss在 scss 中重用另一个类的特定属性
【发布时间】：2021-04-13 08:47:52
【问题描述】：

可以使用@extend 方法在scss 中重用另一个类的所有属性。

.class1 {
   height: 10px;
   width: 10px;
}

.class2 {
   @extend .class1;
   border-color: #000000;
}

这会导致

.class1, .class2 {
   height: 10px;
   width: 10px;
}

.class2 {
   border-color: #000000;
}

是否可以仅重用另一个类的自定义属性？类似的东西

.class2 {
   @extend .class1.height;
   border-color: #000000;
}

结果是这样的

.class1 {
   height: 10px;
   width: 10px;
}

.class2 {
   height: 10px;
   border-color: #000000;
}

非常感谢。

【问题讨论】：

标签： sass extend

【解决方案1】：

您可以，但为此您需要扩展 placeholder 而不是类。您将所需的属性抽象为占位符，并应用于所需的类：

%custom-height {
   height: 10px;
}

.class1 {
   @extend %custom-height;
   width: 10px;
}

.class2 {
   @extend %custom-height;
   border-color: #000000;
}

这将导致：

.class1, .class2 {
   height: 10px;
}

.class1 {
   width: 10px;
}

.class2 {
   border-color: #000000;
}

【讨论】：