Search code examples
cssimportsassmedia-queries

SASS @import multiple files depending on screen size

I have in my project over 20 .scss sheets.

I want to put them in an 'imports' sheet where certain sheets are only read depending on screen width.

I have this working in a non-SASS project with an imports.css using the following:

@import url('sheet-1.css');

@import url('sheet-2.css') screen and (min-width: 300px) and (max-width: 730px);

I've tried this in an imports.scss file - but the compiled imports.css has errors saying:

Syntax error: Invalid CSS after \"sheet-2.css') \": expected selector or at-rule, was \"screen and (min...\"\A

Is this the wrong approach ? .. or is there a solution ?

Solution

  • This is apparently a bug in the Sass parser when you use url(). You'll want to write it like this instead:

    @import 'sheet-1.css';
@import 'sheet-2.css' screen and (min-width: 300px) and (max-width: 730px);

    This should compile to (the CSS validator says this is valid):

    @import url(sheet-1.css);
@import 'sheet-2.css' screen and (min-width: 300px) and (max-width: 730px);

    I've submitted a bug report on your behalf, which you can track here: https://github.com/nex3/sass/issues/1042

    I do, however, recommend that you convert these files to Sass so that they are compiled into a single CSS file. All browsers download all linked stylesheets, even if they don't currently meet the media query restrictions:

    @import 'sheet-1'; // filename = _sheet-1.scss
@media screen and (min-width: 300px) and (max-width: 730px) {
    @import 'sheet-2'; // filename = _sheet-2.scss
}