8

I'm using codekit to compile my Bootstrap LESS files and i keep getting this parse error on media queries that i didn't get when it was previously a CSS file.

"ParseError: media definitions require block statements after any features in /assets/less/homepage.less on line 568, column 2: 567 @media (max-width: @iphone_breakpoint) { 568 }"

Here is the complete line of code in question:

/* Custom, iPhone Retina */ 
@media (max-width: @iphone_breakpoint) {
}

Can anyone explain what's going on?

Jim Garrison
  • 85,615
  • 20
  • 155
  • 190
kingj2002
  • 115
  • 1
  • 1
  • 6
  • Ho ware you importing this less file? Are you using (less) or (inline) – LOTUSMS Jan 01 '16 at 01:06
  • i'm using a less file as a master file to import multiple less files to be compiled. Everything goes will until it hits the media queries on the last page which happens to be homepage.less – kingj2002 Jan 01 '16 at 02:41
  • Refer to this http://stackoverflow.com/questions/34438723/grunt-contrib-less-fails-with-angular-material-media-queries – LOTUSMS Jan 01 '16 at 02:44
  • Importing the file using (inline) compiles but it does not process the variables or mixins in homepage.less – kingj2002 Jan 01 '16 at 03:03
  • what's in the @iphone_breakpoint? is it a simple value i.e. 480px or is there a guard? – LOTUSMS Jan 01 '16 at 03:11
  • Check if it's some non-standar whitespace character (or some other magic stuff) at that line *column 2*. The code itself is valid and [goes fine](http://less2css.org/#%7B%22less%22%3A%22%40iphone_breakpoint%3A%20foo%3B%5Cn%5Cn%2F*%20Custom%2C%20iPhone%20Retina%20*%2F%20%5Cn%40media%20(max-width%3A%20%40iphone_breakpoint)%20%7B%5Cn%7D%5Cn%22%7D). – seven-phases-max Jan 01 '16 at 12:34
  • solved @seven-phases-max . I re-wrote the media query in less2css to debug, copied it over into the file and it compiled. I'm assuming there was some whitespace issue as well. – kingj2002 Jan 01 '16 at 23:01

1 Answers1

9

Just had this error, found the issue was a simple syntax error. I'll post what worked for me.

The error:

>> SyntaxError: media definitions require block statements after any
>> features in _assets/less/styles.less on line 144, column 2:
>>
>> 143
>> 144  div {
>> 145          .links {

Notice the error shows the line as being around 144-145, below we'll see

In the code below I've forgot the . (period) when using the built in .hidden() mixin by .

This outputs the error:

SyntaxError: media definitions require block statements after any features in dir/bar/foo.less on line 144, column 2:

A little misleading as the error is a child within that div on line 149.

div {                // Line 144
    .links {
        .hidden();
    }
    .other-links {
        // Missing `.` for using the mixin
        hidden();    // The real error is here on Line 149
    }
}

Summary:

Make sure you have no syntax errors in the children where the displayed error noted the error.

  1. Check for missing periods before mixins. hidden() -> .hidden()
  2. Check for all other errors ?

Found another syntax error causing this error?
let us know, comment below

Anil
  • 21,730
  • 9
  • 73
  • 100