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

Answer 2

LESS doesn’t currently provide any special support for media queries. This means that it’s impossible to embed media queries within LESS’s nested rules, forcing developers to silo their responsive styles in a separate section of the LESS document, rather than in keeping them in context. Let me give you an example of how it could work:

from A Call for LESS to Embrace Responsive Design

So yes, you can use media queries right now but you cannot write them in the nested syntax.

Check out the comments on that blog post for some proposed solutions that look like they'll be rolled in less.js sooner than later.

Answer 3

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.

Answer 4

If you can use less.js, it works right out of the box. I tried the same example:

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

and it reproduced it exactly the same in the .css file. There's also an escape functionality in less.js, but it only seems to work on values, so I don't think you could use it for this.

body {
    color: e('red');
}

I'm guessing that you're using the original Ruby LessCSS though? If you can't switch to the new one, the only other thing I can think of is using an @include. This might be slightly better than another link tag in the HTML, and if you compress all your CSS files, you might be able to avoid the extra HTTP request.

Answer 5

We use it on our project and never found it to work.

create an external css file of which is not managed by less. The less css file will be able to access the font-face.

Answer 6

So I added a simple @media print { .no-print {display:none;}} into the following referenced .less file:

<link rel="stylesheet/less" href="http://worldMaps.org/maps/styles/growth.less">

and it wouldn't work. However, our css guru pointed out that .lesses default is to use media type of screen, so if you change your referenced less link to

<link rel="stylesheet/less" href="http://worldMaps.org/maps/styles/growth.less" media="all">

Then suddenly the @media print in the less file will get picked up and start working per normal.

Hopefully this helps someone else as confused as I was.