Import Files in Sass with `@import`

Importing files is handy when you have your css in multiple files instead of one bloated stylesheet. See Bootstrap’s Sass files for an example. Every css component gets it’s own .scss file and they all get compiled into one main stylesheet.

The usual imports in a main.scss file are something like this:

 1// Reset
 2@import "_reset.scss";
 3
 4// Definings
 5@import "_varables.scss";
 6@import "_mixins.scss";
 7
 8// Global Styles
 9@imprt "_globals.scss";
10
11// Page specifics
12@import "pages/_about_us.scss";

Notes:

• Files that start with an _ are left alone by sass. They are not compiled. (similar to Jekyll..)
• Order in which files are imported is important because of the cascading nature of css. Things that are defined first are often overwritten by later definitions.
• You can import a file that’s already importing six other files. Nested imports work.