我正在试图找出在SCSS中合并两个相似组的正确方法。 这是当前的css:
.elemType1,
.elemType2,
.elemType3,
.elemType4 {
border: 1px solid #ccc;
background: #fff;
}
.elemType1,
.elemType2,
.elemType3 {
font-size: 10px;
max-width: 1110px;
width: 100%;
max-height: 300px;
}
正如您所看到的,两个组几乎完全相同,除了第一组也有.elemType4。我应该如何合并这些以减少重复,或者这是不可能的?
由于
答案 0 :(得分:3)
使用sass你可以这样写:
.elemType4 {
border: 1px solid #ccc;
background: #fff;
}
.elemType1,
.elemType2,
.elemType3 {
@extend .elemType4;
font-size: 10px;
max-width: 1110px;
width: 100%;
max-height: 300px;
}
见这里:http://sass-lang.com/guide, - > “扩展/继承”
将变成(CSS)
.elemType4 {
border: 1px solid #ccc;
background: #fff;
}
.elemType1,
.elemType2,
.elemType3 {
border: 1px solid #ccc;
background: #fff;
font-size: 10px;
max-width: 1110px;
width: 100%;
max-height: 300px;
}
答案 1 :(得分:2)
假设您没有以elemType
开头的其他课程,您可以缩短这种风格
[class^="elemType"] {
border: 1px solid #ccc;
background: #fff;
&:not(.elemType4) {
font-size: 10px;
max-width: 1110px;
width: 100%;
max-height: 300px;
}
}
Codepen示例:http://codepen.io/anon/pen/MaYQRO