less CSS parse error: media definitions require block statements - css

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.
Check for missing periods before mixins. hidden() -> .hidden()
Check for all other errors ?
Found another syntax error causing this error?
let us know, comment below