Question

我正在尝试开发自己的网格系统。这是我的第一次尝试，也许我错过了一些东西。这是我的CSS：

.column-1 {
  width: 6.86666666667%;
}

.column-2 {
  width: 15.3333333333%;
}

// More such columns

@media only screen and (max-width: 768px) {
  .column-s-1 {
    width: 6.86666666667%;
  }
  .column-s-2 {
    width: 15.3333333333%;
  }
}

正如您所看到的，值是重复的，但类名是不同的。有什么方法可以避免这种重复，因为每增加一个类就会变得越来越复杂。

Answer 1

您可以通过对选择器进行分组来避免重复：

.column-1,
.column-s-1 {
  width: 6.86666666667%;
}

.column-2,
.column-s-2 {
  width: 15.3333333333%;
}

// More such columns
@media only screen and (max-width: 768px) {
  .column-s-1 {
    /* only properties characteristic for this width*/
  }
}

另一种选择是使用LESS或SASS

如何防止媒体查询中的CSS代码重复？

1 个答案: