search

less / less.js

Less. The dynamic stylesheet language.
http://lesscss.org
Apache License 2.0
17.01k stars 3.41k forks source link

@media syntax error #578

Closed gmathieu closed 12 years ago

gmathieu commented 12 years ago

This is the mobile detection css code used by boiler plate. It throws a syntax error in versions 1.2.0 and 1.2.1. Worked fine up until 1.1.6.

@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {

}
austinhappel commented 12 years ago

I had a similar issue with this, specifically using the nodejs module(v1.2.0). The lessc command-line bin file handled things just fine. In my case, I had a comment in the same line as one of the media query rules, which was throwing a syntax error.

This was my less that the parser was choking on:

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (min-height: 601px)             // rules out nook/landscape
and (orientation : landscape) {

}

and removing the comment, like so, results in no syntax error being thrown.

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (min-height: 601px)
and (orientation : landscape) {

}

To me this is a bug though. I should be able to add inline comments next to media query declarations and not get a syntax error when parsing the less with the node module.

stareat commented 12 years ago

You're right, there is an issue with LESS choking on @media only screen and (-o-min-device-pixel-ratio: 3/2) {}

Would be cool if it gets fixed, because this method is used in frameworks like "320 and UP".

Also mentioned here: http://t.co/dKP3o1e

paultyng commented 12 years ago

I'm also getting a compile error on :

@media screen and (min-width:480px) {}
@media screen and (min-width:768px) {}

But only when I have both lines, if I just have one of them, it seems to work.

Still seems to be a problem in 1.2.2

VencaV commented 12 years ago

Same issue, compilation falls on @media only screen and (-o-min-device-pixel-ratio: 3/2) {}

Less.js 1.3.0

pfortes commented 12 years ago

make the parameter a string using ' and you wont have any errors

ej: only screen and (min-resolution: 240dpi) Breaks the compiler...

only screen and (min-resolution: '240dpi') doesn't

christiankopac commented 12 years ago

@pfortes Thanks! Solved my problem... even when I commented the other lines to see if the other rules where causing the problem, this solved it :)

@media  only screen and (-webkit-min-device-pixel-ratio: 1.5), 
        only screen and (min--moz-device-pixel-ratio: 1.5), 
        only screen and (min-resolution: '240dpi') {
sturobson commented 12 years ago

note that -o-min-device-pixel-ratio: 3/2 or even min-device-pixel-ratio: 3/2 isn't part of the spec and appears only Opera are going this route, it seems quite experimental ergo not CSS3. I guess the implementation and fixing of this would depend on how future proof it'd be as it might go away as quick as it's appeared. @agatronic

dmcass commented 12 years ago

Duplicate of #717, fixed by pull request #874.

lukeapage commented 12 years ago

technically 717 is a duplicate of this, but it has more comments..