Question

我不想在CSS上一直重复相同的属性。

在我的情况下，我有三个媒体查询，其中我更改了特定元素的padding的属性，并且在我需要将其作为开头之后：

@media (max-width: 1000px){
     ul > a{
         padding-top: 20px;
         padding-bottom: 20px;
     }
}

@media (max-width: 750px){
     ul > a{
         padding-top: 16px;
         padding-bottom: 16px;
     }
}

@media (max-width: 500px){
     ul > a{
         padding-top: 20px;
         padding-bottom: 20px;
     }
}

正如您所看到的，我必须在第一个和第三个媒体查询上添加相同的代码，我希望减少CSS的行数。

我想将这些行包装成变量或类似的东西：

ul > a{
    padding-top: 20px;
    padding-bottom: 20px;
}

并在每次需要时在整个CSS中使用它们。

我发现在CSS上创建变量experimental technology但是它尚未稳定，并且没有完整的浏览器支持。

因此，有没有一种方法可以在CSS上使用多行而不重复它们？

提前致谢！

Answer 1

只需在没有媒体查询的情况下定义通用规则，然后根据需要使用媒体查询覆盖它，如下所示：

new_line

或者，将ul a{ padding:20px 0; } @media (max-width:750px){ ul a{ padding:16px 0; } }添加到您的媒体查询中并创建一个新的以定义所有常见规则，如下所示：

min-width

Answer 2

您可以使用min和max宽度Fiddle的一个查询，也只有li元素可以是ul元素的直接子元素（我使用过{ {1}}代替color表单演示）

＆＃13;

margin

＆＃13;

ul a {
  color: blue;
}
@media screen and (min-width: 500px) and (max-width: 750px) {
  ul a {
    color: red;
  }
}

＆＃13;

如何避免在CSS上重复相同的行？

2 个答案: