@media and @font-face support in LessCSS

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

All of the answers above are out of date.

Both less.js and lessCss/dotless support @media and @font-face.

They also now support @media with nested rules, e.g.

.cl {
 @media screen and (max-width: 600px) {
  .d {
   .e {
     background: none;
   }
  }
 }
}

becomes

@media screen and (max-width: 600px) {
 .cl .d .e {
   background: none;
 }
}

Please refer to the less.js documentation and dotless documentation for more information.