Libsass: Media query expression must begin with '('

Created on 28 Nov 2015 · 7Comments · Source: sass/libsass

@media all and (min-width: 901pt)                          { @import "l-xl.scss" }
@media all and (min-width: 601pt)  and (max-width: 900pt)  { @import "m-l.scss"  }
@media all and (min-width: 241pt)  and (max-width: 900pt)  { @import "s-m.scss"  }
@media all                         and (max-width: 900pt)  { @import "xs-m.scss" }
@media all                         and (max-width: 600pt)  { @import "xs-s.scss" }

@media all and (min-width: 1601pt)                         { @import "xl.scss" }
@media all and (min-width: 901pt)  and (max-width: 1600pt) { @import "l.scss"  }
@media all and (min-width: 601pt)  and (max-width: 900pt)  { @import "m.scss"  }
@media all and (min-width: 241pt)  and (max-width: 600pt)  { @import "s.scss"  }
@media all                         and (max-width: 240pt)  { @import "xs.scss" }

The error:

/~/css-loader?importLoaders=2&sourceMap!./~/autoprefixer-loader?browsers=last 2 version!./~/sass-loader?outputStyle=exp
nded&sourceMap=true&sourceMapContents=true!./assets/styles/style.scss
odule build failed:
media all and (min-width: 901pt)                          { @import "l-xl.scss" }
                                                                              ^
     Media query expression must begin with '('
     in G:\work\3\webapp\assets\styles\style.scss (line 363, column 81)
rror:
media all and (min-width: 901pt)                          { @import "l-xl.scss" }
                                                                              ^
     Media query expression must begin with '('
     in G:\work\3\webapp\assets\styles\style.scss (line 363, column 81)
   at options.error (G:\work\3\webapp\node_modules\node-sass\lib\index.js:277:32)
@ ./assets/styles/style.scss 4:14-281 13:2-17:4 14:20-287

Bug - Confirmed Dev - Test Written

Source

catamphetamine

Most helpful comment

also happens if you forget to add a semicolon ; after an @import "xyz";

googol7 on 23 Nov 2016

👍125 😄23 🎉20 ❤18 🚀6

All 7 comments

The error goes away when I put semicolons inside:

@media all and (min-width: 901pt)                          { @import "l-xl.scss"; }
@media all and (min-width: 601pt)  and (max-width: 900pt)  { @import "m-l.scss";  }
@media all and (min-width: 241pt)  and (max-width: 900pt)  { @import "s-m.scss";  }
@media all                         and (max-width: 900pt)  { @import "xs-m.scss"; }
@media all                         and (max-width: 600pt)  { @import "xs-s.scss"; }

@media all and (min-width: 1601pt)                         { @import "xl.scss"; }
@media all and (min-width: 901pt)  and (max-width: 1600pt) { @import "l.scss";  }
@media all and (min-width: 601pt)  and (max-width: 900pt)  { @import "m.scss";  }
@media all and (min-width: 241pt)  and (max-width: 600pt)  { @import "s.scss";  }
@media all                         and (max-width: 240pt)  { @import "xs.scss"; }