Or at least, how I organize my files.

Image for post
Image for post
Background photo by Sai Kiran Anagani — https://unsplash.com/@iamkiran

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.

  • Components
  • Layouts
  • Pages


helpers folder will contains our functions, mixing and variables.

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


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

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


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

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


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

── 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.


First, you need to install some dependencies:

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


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:

French front end developer living/working at San Francisco. Scss & Javascript lover. Work at @feedly

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store