sass - 在 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;
}
非常感谢。
解决方案
你可以,但为此你需要扩展一个占位符而不是一个类。您将所需的属性抽象为占位符,并应用于所需的类:
%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;
}
推荐阅读
- jboss - 将 jboss 版本 6.4 迁移到 7.2 时出现异常
- delphi - 我应该使用什么结构?德尔福 10.3
- unity3d - Unity3D中的按钮没有响应
- sql-server - 如何在sql server中使用内连接来连接两个表并覆盖第一个表中的那个
- python - getpass.getuser / os.environ['username'] 返回计算机名而不是用户名
- github-pages - 我没有找到“启动自动页面生成器”
- reactjs - 无法分配给“stockItems”,因为它是只读属性。TS2540
- node.js - 在协议提供者测试中指定自签名证书
- laravel - 在laravel中将.heic图像转换为jpg图像格式
- android - TABLE_NAME 没有列 COLUMN_NAME