How To Use Multiple Media Queries Within A Css Class In Less?

Question

I have a less file containing a simple css class that needs to have different styles applied for various screen sizes. The following code only works on desktop (the first @desktop media query). Nothing happens for mobile. I have tried many variations of this syntax with no luck and haven't found anything about this in the docs. You can also see the live demo here (notice how if you stretch the screen wider than 1024px the div turns orange, but it does not turn red or green when smaller than 1024px as it should). Thanks.

html

<div class="derp">
Hello
</div>

less

@desktop-min-width:         1024px;
@phone-max-width:           768px;

@desktop: ~"only screen and (min-width: @{desktop-min-width})";
@tablet: ~"only screen and (min-width: @{phone-max-width}) and (max-width: @{desktop-min-width}";
@phone: ~"only screen and (max-width: @{phone-max-width})";

@appHeight:     749px;
@appWidth:      421px;

.derp {
  @media @desktop {
      background-color: orange;
    }

  @media @tablet {
      background-color: red;
    }

  @media @phone {
    background-color: green;
  }
}

Tomm · Accepted Answer · 2018-11-07 22:26:26Z

2

There is a problem with

@tablet: ~"only screen and (min-width: @{phone-max-width}) and (max-width: @{desktop-min-width}";

Remove it for a moment, and you will see green background is displayed for phone screen.

You need to add ")" for a @tablet at the end

edited Nov 7, 2018 at 22:26

answered Nov 7, 2018 at 22:20

Tomm

1531 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How To Use Multiple Media Queries Within A Css Class In Less?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related