Structuring my Sass 101, part 2.

note: This is not a guide. This is just how I choose to do things.

Part 2, Compiling

In the last post I quickly discussed my folder structure, in this post I'm going to talk you through my basic set of files and how the yall compile to styles.scss.

So here's my folder structure - 

Let's start with the main file that imports everything - styles.scss

Import it all and import it now

So the code within the styles.scss file looks like this 

/*
-----------------------------------------------------
CSS file for cool client name here
Media: ALL THE THINGS

Author: Stuart Robson 

-----------------------------------------------------
*/

// Normalize

@import "defaults/_normalize.scss";

// Helpers

@import "defaults/_helpers.scss";

// Mixins

@import "defaults/_mixins.scss";

// Variables

@import "defaults/_variables.scss";

// Grid System

@import "partials/_grids.scss";

// Base

@import "defaults/_base.scss";

// Put Your stuff here

@import "_page.scss";

// Internet Explorer Specific fixes

@import "partials/_ie.scss";

// Print styles

@import "defaults/_print.scss";

// DEBUG MODE 

$debugMode:         false;

@import "defaults/_debug.scss";

So, in this code you can see what I'm importing. There are a few things to note. The _helpers.scss is a set of @mixins that I currently have that I include into the compiled CSS rather than the HTML (that's a whole different blog post as to why).

There are two files that I keep in the 'partials' folder that are included in this 'master' import scss file. The _grids.scs file although 'generic' may have me putting things in specific to the site I'm working on as well as the default setup. Likewise the _ie.scss file, although always included in a project. I may decided to add specific IE CSS rules here (although this is rare now (another blog post).

What's on the _page

The _page.scss file (I might change that to _system.scss or something) is where I put any site specific scss files which would be taken from with the partials folder. 

Recap & Onwards

So I've touched on how I get my scss files importing with each other and compiling to a lovely styles.css file. Next up I'll go over my _mixins.scss and _variable.scss files with the whats and hows of the code therein.