Question

我正在试图找出在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。我应该如何合并这些以减少重复，或者这是不可能的？

由于

Answer 1

使用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， - ＆gt; “扩展/继承”

将变成（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;
}

Answer 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

SCSS - 合并类似组的正确方法（但不一样）

2 个答案: