less CSS parse error: media definitions require block statements

Question

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?

Solution

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 twitter-bootstrap.

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

Comments

[LOTUSMS]

Ho ware you importing this less file? Are you using (less) or (inline)

[kingj2002]

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

[LOTUSMS]

Refer to this stackoverflow.com/questions/34438723/…

[kingj2002]

Importing the file using (inline) compiles but it does not process the variables or mixins in homepage.less

[LOTUSMS]

what's in the @iphone_breakpoint? is it a simple value i.e. 480px or is there a guard?

[seven-phases-max]

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.

[kingj2002]

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.

[MartijnK]

In my case it was a stray ')' that didn't show up as a syntax error in the @media query.

[Otto G]

An omitted colon can have the same effect…