Sass @import partial


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.