Structuring my Sass 101, part 3.
On This Page:
note: This is not a guide. This is just how I choose to do things.
In the first post I discussed my file structure, in the 2nd I gave a brief overview of how I import everything for compiling my CSS.
In this post I'm going to discuss my _variables.scss file and my (personal) _mixins.scss file.
_variables.scss
This is pretty self explanitory really. In this file I keep all the Sass variables that I'd be using throughout the project. So this could include colors, font-families, initial document settings (like font-size and line-height), gutters.
These individual variables are grouped and seperated by a comment. So it would look something like this.
// initial variables set-up
$doc-font-size:16; $doc-line-height:24;
// gutter for grids
$gutter: 2.1666667%;
// colors
$dark-grey: #5e5e5e; $dark-red: #b50000;
// font family
$header-font: 'futura-pt',sans-serif; $content-font: 'proxima-nova',sans-serif;
This file is opened once in a while, for adding things usually. Keeping all my variables in one place means I won't have to hunt for it later when I see it referenced but can't find it to change it.
_mixins.scss
Using a file like this you can tell that I don't use something like Compass or Bourbon (unless required by a client). This is because I like to write my own mixins so I know what the mixin does and how it'll nicely output when compiled. So this file is where I keep my font-size mixin for REMs w/ a px fallback that I can also set or auto-create the line height and bottom margin for. There's a function for just creating the font-size REM w/ a px fallback. A mixin for setting a sprite file location and basic setup for using with :before and much more.
Even if you use Compass or Bourbon I bet there's a time where you'd need something custom, just for your current project. Stick it in there and if you need to edit it. You'll know where it is.
Recap & Onwards
In this post I've touched on what I include in my variables and mixins files. Helping me keep things sane and seperate in my Sass. In the next post I'll go over my _helper.scss and _debug.scss files where I make the HTML5 boilerplate helpers mixins so I can add them into my CSS and not my HTML (i'll get to my reasons why, soon).
