仅重用 scss 中另一个类的特定属性

问题描述

可以使用@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;
}

相关问答

依赖报错 idea导入项目后依赖报错,解决方案:https://blog....
错误1:代码生成器依赖和mybatis依赖冲突 启动项目时报错如下...
错误1:gradle项目控制台输出为乱码 # 解决方案:https://bl...
错误还原:在查询的过程中,传入的workType为0时,该条件不起...
报错如下,gcc版本太低 ^ server.c:5346:31: 错误:‘struct...