问题描述
可以使用@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;
}
非常感谢。
解决方法
你可以,但为此你需要扩展一个 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;
}