Question

Hello does anyone know how to do a media query with LessCSS?

  @media screen and (max-width: 600px) {
      #container{
          width: 480px;
      }
  }

gives me the following error:

! Syntax Error: on line 23: expected one of :: : . # * - [ @media @font-face , { ; got ( after:

@media screen and

Similarly, @font-face and any CSS3 query with an @ conflict with LessCSS’s compiler.

Thanks!

Answer 1

As far as I understand, LessCSS does not support @media, you may find open tickets for that on their github home page.

The only way I see for this to work in your case is this:

<link rel="stylesheet" media="screen and (max-width: 480px)" href="smartphone.css" />

---

It does look like the issue has been fixed in the LessCSS releases since the accepted answer.