Before we get started, make sure you have Sass installed:
$ gem install sass
# if you don't have write permissions
$ sudo gem install sass
Now assuming the following directory structure:
$ tree
.
├── partial.scss
└── main.scss
0 directories, 2 files
How can we import partial.scss
inside main.scss
?
To do that, two things must be done:
1. Prepend an underscore to the filename:
$ mv partial.scss _partial.scss
2. @import the partial:
// main.scss
@import "partial";
If you have more than one partial, you can separate each partial with a comma:
// main.scss
@import "partial-1", "partial-2";
If the partials are found in different directories, you’ll need to specify the relative paths:
// main.scss
// parent directory partial
@import "../partial";
// subdirectory partial
@import "sub/partial";
All Sass variables, mixins, and styles are cascaded in the order that they are imported.
Unfortunately, importing a partial multiple times means that it’s included multiple times.
That’s why it’s good practice to do all imports in a single file.
For more information about importing Sass partials, Zurb has a nice introduction.