将CSS类标识符合成为新的CSS类

Question

我有一个应用了以下类的div。

<div class="col-lg-4 col-md-6 col-sm-12 mb-3">Lorem Ipsum</div>

例如，我想知道是否可以将它们组合到一个新的CSS类中

.my_format {
  col-lg-4; 
  col-md-6; 
  col-sm-12; 
  md-3 
}

这样我就不需要重新输入整个内容，让我的html变得更干净。谢谢你的帮助。

Answer 1

可以将新类添加到已有的css类中

.my_format, .col-lg-4{}
.my_format, .col-md-6{}
.my_format, .col-sm-12{}
.my_format, .mb-3{}

Answer 2

在这种情况下，您可以使用scss。在scss中，您可以扩展多个css类。

看看这个：https://css-tricks.com/the-extend-concept/

SCSS

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-lg-4 {
  color: blue;
}

.my-format {
  @extend .col-lg-4, .col-md-6, .col-sm-12, .mb-3;
}

这是一个样例小提琴：https://jsfiddle.net/DTcHh/40847/