This post goes over how to import a Sass file in another Sass file.
Before we get started, make sure you have Sass installed:
gem install sass
Or 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
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.