sass Partials and Import Partials


You can create partial files that contain smaller snippets of your stylesheets. This allows you to modularize your CSS and allows for better structure of your stylesheets. A partial is a Sass file named with a leading underscore, i.e: _partial.scss. The underscore lets Sass know that the specific file is a partial and it will not be generated into a CSS file.

Sass partials are meant to be used with the @import directive. When using @import, you can omit the leading underscore.


Supposing you have a file structure with partials like this

- main.scss
- _variables.scss
- content
  |-- _buttons.scss
  '-- _otherelements.scss

You can include those partials in your main.scss file as follows (leading underscores and file extensions are omitted in this example):

// main.scss - Imports:
@import 'variables';
@import 'content/buttons';
@import 'content/otherelements';