media-query少了两个类

Question

我试图用更少的时间来缩短代码。如何将class2添加到此代码中以及是否可以添加？类为不同的分辨率采用不同的值。

@media only screen and (max-width:600px) {
    .class1 {
        color: red;
    }
    .class2 {
        color: blue;
    }
}
@media only screen and (max-width:1600px) {
    .class1 {
        color: red;
        }
    .class2 {
        color: blue;
        }
 } 

@media only screen and (max-width:1920px) and (min-width: 1450) {
     .class1 {
        color: red;
        }
     .class2 {
        color: blue;
        }
  }
 @media only screen and (max-width:1300px) and (min-width: 1280px) {
     .class1 {
        color: red;
        }
     .class2 {
        color: blue;
        }
 }

ITD。

我这样做：

  .class1{
      @media only screen and (max-width: 600px){
         color: red;
         /*&:extend(.class2); not work*/
          }
     @media only screen and (max-width: 1600px){
         color: red;

Answer 1

修改

为了缩短代码，我唯一可以使用的是mixins：

.responsive-max-width(@max-width; @color) {
  @media only screen and (max-width: @max-width) {
    color: @color;
  }
}

.responsive-max-and-min-width(@max-width; @min-width; @color) {
  @media only screen and (max-width: @max-width) and (min-width: @min-width) {
    color: @color;
  }
}

.class1 {
  .responsive-max-width(600px, red);
  .responsive-max-and-min-width(1920px, 1450px, red);
}

.class2 {
  .responsive-max-width(1600px, blue);
  .responsive-max-and-min-width(1300px, 1280px, blue);
}

这里是codepen。

原始答案：

this一个怎么样？

@justScreen: ~"only screen and";

@media @justScreen (max-width: 600px), @justScreen (max-width: 1600px) {
  .class1 {
    color: red;
  }
  .class2 {
    color: blue;
  }
}

逗号,在媒体查询中表示OR。