logo

Always Twisted

{ Slightly Bizarre Ramblings Of A Front-End Developer }

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.

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

Did you like this post? Hire me.
blog comments powered by Disqus

Did you like this post? Why not share it on twitter -

Or, why not follow me on twitter too -


Categories