Question

我无法确定如何（或最好的方法）像这样压缩CSS：

  /*purple*/
  #page .purple-title-background h1.et_pb_module_header,
  #page .purple-title-background span.et_pb_fullwidth_header_subhead,
  #page .purple-title-background .et_pb_header_content_wrapper {
      background: #991e66;
      box-shadow: 10px 0 0 #991e66, -10px 0 0 #991e66;
  }

  /*brown*/
  #page .brown-title-background h1.et_pb_module_header,
  #page .brown-title-background span.et_pb_fullwidth_header_subhead,
  #page .brown-title-background .et_pb_header_content_wrapper {
      background: #4c0730;
      box-shadow: 10px 0 0 #4c0730, -10px 0 0 #4c0730;
  }

  /*tan*/
  #page .tan-title-background h1.et_pb_module_header,
  #page .tan-title-background span.et_pb_fullwidth_header_subhead,
  #page .tan-title-background .et_pb_header_content_wrapper {
      background: #fff4d8;
      box-shadow: 10px 0 0 #fff4d8, -10px 0 0 #fff4d8;
  }

  /*gray*/
  #page .gray-title-background h1.et_pb_module_header,
  #page .gray-title-background span.et_pb_fullwidth_header_subhead,
  #page .gray-title-background .et_pb_header_content_wrapper {
      background: #f7f7f9;
      box-shadow: 10px 0 0 #f7f7f9, -10px 0 0 #f7f7f9;
  }

您会注意到，每个类唯一不同的地方是<color name>-title-background之类的类。我知道必须有一种方法可以将其纳入一个CSS“规则”。而且，很遗憾，我不能使用预处理器。

谢谢！

Answer 1

考虑CSS变量，您可以像这样重写代码：

#page .title-background h1.et_pb_module_header,
#page .title-background span.et_pb_fullwidth_header_subhead, 
#page .title-background .et_pb_header_content_wrapper{
    background: var(--c,#fff);
    box-shadow: 10px 0 0 var(--c,#fff), -10px 0 0 var(--c,#fff);
}

.purple {
  --c: #991e66;
}

.brown {
  --c: #4c0730;
}

.tan {
  --c: #fff4d8;
}

.gray {
  --c: #f7f7f9;
}

然后只需将color类添加到元素中，这样您的html代码将如下所示：

 <div class="brown title-background " >...</div>

代替：

 <div class="brown-title-background" >...</div>

简化和压缩CSS

1 个答案: