Pitch your project

Random text


By admin Category Uncategorized, Posted February 10th, 2016
Sass directory structure

One of the most useful features of Sass is being able to separate your stylesheets into separate files. You can then use the @import directive to include the source of your individual files into one master file.

But how should you structure your Sass projects? Is there a standard way of separating out your CSS files?

basic directory structure

I like to layout my Sass projects like this:

|-- mixins                  # Contains all the mixins.
|   |-- _box-sizing.scss
|   |-- _border-radius.scss
|   ...
|-- modules                 # Contains all Sass tools and helpers.
|   |-- _variables.scss
|   |-- _grid.scss
|   |-- _default.scss
|   |-- _typograhy.scss
|   ...
|-- partials                # Contains all the styles of the main sections of
|                             the layout.
|   |-- _layout.scss
|   |-- _header.scss
|   |-- _nav.scss
|   |-- _footer.scss
|   ...
|-- pages                   # Contains all styles of the pages.
|   |-- _home-page.scss
|   |-- _about-page.scss
|   |-- _contact-page.scss
|   ...
|-- vendors                 # Contains all the CSS files from external
|                             libraries and frameworks.
|   |-- _normalize.scss
|   |-- _bootstrap.scss
|   ...
 -- main.scss               # Primary Sass file.

As you can see, there is only one Sass file at the root level: main.scss. All the other files are divided into appropriate folders and prefixed with an underscore ( _ ) to tell Sass they shouldn’t be compiled to .css files. Indeed, it is the base file’s role to import and merge all of those.

Primary Sass file

This allows me to keep my primary Sass file extremely clean:

// vendors
@import 'vendors/_normalize.scss';
@import 'vendors/_bootstrap.scss';

// mixins
@import 'mixins/_boz-sizing.scss';
@import 'mixins/_border-radius.scss';

// modules
@import 'modules/_variables.scss';
@import 'modules/_grid.scss';
@import 'modules/_default.scss';
@import 'modules/_typogaphy.scss';

// partials
@import 'partials/_layout.scss';
@import 'partials/_header.scss';
@import 'partials/_nav.scss';
@import 'partials/_footer.scss';

// pages
@import 'pages/_home-page.scss';
@import 'pages/_about-page.scss';
@import 'pages/_contact-page.scss';

This folder contains all the CSS files from external libraries and frameworks – normalize, Bootstrap, and so on.


This folder contains mostly mixins with prefixes and small calculations for styles.


This folder contains all Sass tools and helpers. It also contains all kinds of specific modules like a slider, a loader, a widget, or anything along those lines.


This folder contains all the styles of the main section of the layout( header, nav, footer ).


This folder contains all the styles that are in the page, like if there is an different background-color or a different font.

There are a lot of different Sass directory structures out there but this, in my opinion, is one of the easiest to use.

Posted by Nigel Hoegee

Leave a Reply

Your email address will not be published. Required fields are marked *