csstwitter-bootstraplessmedia-queriescodekit

less CSS parse error: media definitions require block statements


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 .

    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