Pitch your project

Random text






Blogs

0    
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:

scss
|-- 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';
Vendors

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

Mixins

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

modules

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.

Partials

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

Pages

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 *