Syntax to include separate Sass file?

Question

I can't confirm that this syntax is best practice. I would like to reference an external Sass file and have it prepend it to my final CSS file, this way my Sass sheet looks more clean, and I'm only still only making one HTTP request.

For example, take the "normalize" code and put it into a .sass file, then in my sass sheets simply refer to it:

@import src/normalize @import src/droidSans  rest of code here..... 

It works fine so far, but I can't find anything concrete if I'm headed in the right direction. Also I am just making static templates for the time being... not using Rails at the moment.

I have been playing around with Sass for a few hours and I love it!!!

Answer 1

In order to prevent your partial from being converted into its own css file, prefix the filename with an underscore, _normalize.scss. Then you can import it the way you've indicated you're doing already:

@import "normalize"; 

Or import many files at once:

@import "normalize", "droidSans"; 

Or import from a relative directory:

@import "folder/file" 

Note the use of double-quotes and semi-colon; I'm using the SCSS syntax which is a later development to the SASS word. While both styles are valid, you may find yourself preferring one over the other depending on what other languages you dabble in.

Further reading can be found under Directives/Partials in the documentation.