css - 媒体查询少了两个类

Question

我试图用 less 来缩短代码。如何将 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;
        }
 }

它。

我这样做:

  .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。