How I organize my SCSS with Bourbon and Neat
I read Thoughtbot’s Style Sheet Swag quite a while ago but never really tried to implement it until a recent side project. As it turns out, this is much cleaner than using the asset pipeline.
This is mostly in the context of Rails but could be used outside of Rails easily. In my application.css.scss file you often see something like this (or sometimes far more verbose).
//= require font-awesome
//= require_self
//= require_directory .
While this works perfectly fine I’ve found that it can lead to a lot of clutter in your styles. Instead of being explicit and deliberate with your stylesheets you have free reign to place them wherever you want without much thought going into it.
Personally, this can lead to rushed and messy styles placed in contexts that they don’t belong. Suddenly I have my project styles in application.css.scss instead of my project.css.scss file.
Now instead of having my files scattered and included by default I import them individually as such.
//= require font-awesome
@import 'bourbon';
@import 'neat';
@import 'base/styles';
@import 'projects';
@import 'project';
@import 'issues';
My base/styles.css.scss imports several other files in the same base directory including variables.css.scss and mixins.css.scss. I find that this keeps my stylesheets clean, organized, and easier to modify.
Since Bourbon, Neat, and base/styles is included towards the top, any variables and mixins defined in any of the includes from it are included in anything else we import later on.
Bourbon and Neat are very straight forward and easy to use but very powerful. The mixins Bourbon provides can help clean up any messy and ugly vendor prefixes while Neat provides a lightweight grid managed by mixins rather than classes.
This is how Bourbon, Neat, and SCSS’s @import keep my stylesheets clean and maintainable.