Sass @import partial

This post goes over how to import a Sass file in another Sass file.

Prerequisites

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 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.