我正在尝试使用 SCSS 清理我的 CSS 以使其更清洁。
标准 CSS:
.dark-hr,
.light-hr {
width: 100%;
height: 1px;
margin: 15px 0px;
}
.dark-hr {
background-color: #595959;
}
.light-hr {
background-color: #cccccc;
}
与 SCSS:
.generic-hr {
width: 100%;
height: 1px;
margin: 15px 0px;
}
.dark-hr {
@extend .generic-hr;
background-color: #595959;
}
.light-hr {
@extend .generic-hr;
background-color: #cccccc;
}
有什么方法可以避免创建不会使用的“generic-hr”类?我希望某种巢能很好地工作。在这种情况下,CSS 绝对比 SCSS 更干净、更易读。
理想情况下,我需要这个在 SCSS 中工作:
.## {
// base class that is not outputted
.dark-hr {
//attributes the extend the base class '.##'
}
.light-hr {
//attributes the extend the base class '.##'
}
}
输出:
.dark-hr, .light-hr {
//shared attributes defined by '.##'
}
.dark-hr {
// overrides
}
.light-hr {
// overrides
}