Structuring my Sass 101, part 3.

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.


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


// 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.


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).