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

helpers folder will contains our functions, mixing and variables.

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

Components

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

Pages

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

Layouts

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.

Gulp

First, you need to install some dependencies:

$ 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:

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