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?

Answer 1

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