Structuring my Sass 101, part 1.

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

I've been meaning to write more about how I structure my Sass files when front-end dev'ing for clients. I was going to do this huge long post but I kept finding that idea daunting.

The plan is to have several short posts discussing bits of the whole that'll eventually make 'the whole'.

Part 1, Folder Structure

I keep my Sass folder within my CSS folder. Using something like codekit you can choose to do this differently, but for me this is just easier.

So I'd have a CSS folder, where the compiled SCSS would end up, and a folder called SCSS. In that folder there's a further two, defaults and partials.

folder structure

The 'defaults' folder is where I'd keep things that would never or very rarely change during the projects lifetime. This is where your reset would go, your print styles and your helpers.

Sass folder fully open

In the image above there are two files that you'd probably have open for the start of a project and at times during it. These are the _variables.scss file and the _mixins.scss file (more on this in a future post).


Hopefully you can see from the above image how everything gets compiled via styles.scss into styles.css (again more on this in a future post).

Recap & Onwards

So, quite a short post. Just how I lay my folders and files out when I'm getting my pre-processing going on. In the next post of this little series I'll go through how and what I'm importing and where in the SCSS files to get my nicely outputted CSS up and running.

Go to part two of this series