Module partials

Module partials is where we get to work. Here we write Sass rules that will create your UI foundational layer._buttons.scss, _forms.scss, _global-design.scss, _reset.scss and _typography.scss all contain Sass rules that will process into CSS. While they will import other partials, mixins and placeholder selector rules, it is important to remember that these files are engineered only to output CSS.

Taking buttons as an example; between gradients, :hover and :active states, one could go a little mad over the complexities in styling. It is important to keep your Sass logic out of these files and focus purely on the rules that will produce CSS for your selector.

Using a Compass Extension to quickly engineer a button is a great example. In our _buttons.scss partial we would only have code like so:

button, a.button {
  @include button($button-color);
}

Keeping functional Sass separate from presentational Sass is important in order to maintain readability, search-ability and scalability of your code. Patterns like placing mixins in the same file as presentational Sass leads to overly complex files to scan and opportunities for accidental pollution of your processed CSS.

Custom mixins, placeholder selectors and custom function organization

Custom code for a project is the one area where I see the most issues with file management. Polarizing concepts, like keeping things global or local, paralyze many developers. They want to keep the code as accessible as possible, but inevitably end up creating functional Sass that is specific to a type of UI or module. So instead of ignoring these issues, I recommend embracing the concepts that allow developers to create abstract concepts while maintaining a code organization that makes sense.

Using our button example again, let's say that you need to roll your own from scratch. In the file structure there is a corresponding buttons/ directory where you will keep your _mixin.scss, _extend.scss and custom function files. This solution will keep your presentational Sass clean and readable, while placing your functional Sass in a directory that is modular and is easy to find.