How do you do a simple import of another sass/scss file?

Hello everyone-
I think this should be a simple question but I have gotten myself stuck. I am trying to do some very basic separation of styles to take advantage of SASS. I have in themes/mytheme, so far:

  • styles.scss - only contains @import “mytheme.scss”
  • mytheme.scss - begins with: @import "../reindeer/reindeer.scss"; @include reindeer; $mainColor: #336699; ... .someStyle{ // this all works fine color: $mainColor; } // none of the rules in window.scss come in... @import "window"; // which contains standard css styles

    Am I missing something about imports? I have tried it as window.scss, window, tried the “partial” rules as defined by Sass using _window.scss… I tried making it a mixin and including it… nothing. Yet I’ve had no problem with an almost identical setup in another project, which makes me think I’m missing something else simple.

    Nothing seems to make them appear. All identical rules stuck in the main mytheme.scss file work fine.

    Any help would be greatly appreciated.

    Thank you!

Try regrouping all the imports at the beginning of the file before any @include etc. - I don’t remember when but I recall having seen some cases where that matters. Also, try using “window.scss” until other problems are resolved just to make sure you are looking at one problem at a time and not possibly two separate ones.

Partials are not really supported yet (nor would they really bring any benefits - the only reason they exist is that the Ruby version of the SASS compiler automatically scanned for and compiled all .scss files in the directory except for partials) but there is a change under review that would automatically load partials just for better compatibility with the original SASS implementation and libraries using SCSS.

Thanks, Henri – the order did it, and no problem on the partials. The order mattering is not entirely clear to me, or I must be misunderstanding what it’s REALLY doing… it’s certainly not the equivalent of an inline replacement at this point. That said, I set up an include to all my “global” css variables and call that first in each of my scss files and it seems to be fine.

Thank you for your help!

The order issue is related to
CSS 2.1 specification not allowing CSS imports after other rules

As an SCSS file can import CSS files (which are not inlined unlike SCSS imports), the restriction also applies to SCSS at least to some extent - at least when the imported file (directly or indirectly) imports CSS files, I can’t recall if also in some other cases.