如何将多种不同的col类合并封装为单个自定义CSS类使用？

实现方案 #

1. 原生CSS写法（无需预处理器，兼容性最好） #

直接把对应断点的样式规则写到自定义类中即可：

.allcol {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
/* 对应md断点 ≥768px */
@media (min-width: 768px) {
  .allcol {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
}
/* 对应lg断点 ≥992px */
@media (min-width: 992px) {
  .allcol {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
}
/* 对应xl断点 ≥1200px */
@media (min-width: 1200px) {
  .allcol {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
}

写完后直接在元素上使用 <div class="allcol"> 即可和原来的多类写法效果完全一致。

2. Sass/Less预处理器继承写法 #

如果项目使用了CSS预处理器，可以直接继承现有类，不用手动复刻样式：

.allcol {
  @extend .col-12, .col-md-10, .col-lg-8, .col-xl-4;
}

编译后会自动把所有对应类的样式合并到.allcol选择器下，无额外冗余代码。

3. Bootstrap专属mixin调用 #

如果是Bootstrap项目，可以直接调用官方提供的网格mixin生成自定义类：

.allcol {
  @include make-col-ready();
  @include make-col(12);
  @include media-breakpoint-up(md) {
    @include make-col(10);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
  @include media-breakpoint-up(xl) {
    @include make-col(4);
  }
}

这种方式不需要依赖Bootstrap预编译好的col类，样式冗余度更低。

内容的提问来源于stack exchange，提问作者BlazekaMarko