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
Let’s create our first, and the main, file:
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:
The components folder will contains all the modules we will use in our code.
The pages folder will contains all the css about a specific page.
The layouts folder contains the diffents kind of layout and responsive rules.
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.
First, you need to install some dependencies:
gulp and gulp-sass.
$ npm install gulp gulp-sass --save-dev
For this one, we’ll use grunt-sass.
$ npm install grunt grunt-sass --save-dev
The both Gulp and Grunt sass task use the
node-sassmodule, and we can use it directly in our
$ npm install node-sass --save-dev
To contunie to learning more about Sass, I recommend you couple of links:
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.