CODEWITHSUNDEEP
cssless
Goffer
Goffer

Reputation: 410

media-query less two classes

I was trying shorten the code with less. How to add class2 to this code and whether it is possible at all? Classes take different values for different resolutions.

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

I do this:

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

Upvotes: 0

Views: 546

Answers (1)

amedina
amedina

Reputation: 3426

EDIT:

The only thing I can come with in order to shorten your code is with the use of 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);
}

Here's the codepen.

ORIGINAL ANSWER:

How about this one?

@justScreen: ~"only screen and";

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

Comma , denotes OR in media queries.

Upvotes: 2

Related Questions