Organize your Sass files

Osternaud Clement

Oct 24, 2016·2 min read

Or at least, how I organize my files.

Organization it’s a big step in each projects, especially if you reopen it 6 month later.

If you don’t know Sass, go to the guide.

There are two syntaxes available for Sass. The first, known as SCSS (Sassy CSS) and used throughout this reference, is an extension of the syntax of CSS. This means that every valid CSS stylesheet is a valid SCSS file with the same meaning. In addition, SCSS understands most CSS hacks and vendor-specific syntax, such as IE’s old filter syntax. This syntax is enhanced with the Sass features described below. Files using this syntax have the .scss extension. (source)

Create multiple files

For a better organization, we will split our code in several folders/files. Usually, I create a css folder into a asset folder. The assets folder contains a css, icons, images and js folders.

Let’s create our first, and the main, file: app.scss

This file will contains the imports of all components and other .scss files. Let it blank for now.

Done? Ok, let’s create our future folders:

• Helpers
• Components
• Layouts
• Pages

Helpers

helpers folder will contains our functions, mixing and variables.

Exemple

── helpers
    ├── _functions.scss
    ├── _mixins.button.scss
    └── _parameters.scss

Components

The components folder will contains all the modules we will use in our code.

Exemple

── components
    ├── _buttons.scss
    ├── _cards.scss
    ├── _comments.scss
    ├── _footer.scss
    ├── _header.scss
    ├── _navigation.scss
    └── _pagination.scss

Pages

The pages folder will contains all the css about a specific page.

Example

── pages
   ├── _about.scss
   ├── _blog.scss
   ├── _post.scss
   ├── _projects.scss
   ├── _reading.scss
   ├── _tag.scss
   └── _works.scss

Layouts

The layouts folder contains the diffents kind of layout and responsive rules.

Example

── layout
   └── _responsive.scss

One file to rule them all

Now we can create our app.scss file in the root folder. This file contain all the import from the sub files.

Compile our .scss files

We need a tool to compile our Scss code to a understandable CSS language.

We can use Gulp, Grunt or just a NPM scripts.

Gulp

First, you need to install some dependencies:

gulp and gulp-sass.

$ npm install gulp gulp-sass --save-dev

Grunt

For this one, we’ll use grunt-sass.

$ npm install grunt grunt-sass --save-dev

NPM Script

The both Gulp and Grunt sass task use the node-sassmodule, and we can use it directly in our package.json.

$ npm install node-sass --save-dev

Useful links

To contunie to learning more about Sass, I recommend you couple of links:

• Sass lang
• TheSassWay
• CSS Tricks

Thanks for reading this. If you know better ways to organize your code or easier methods, just let me know in the comment or in twitter.