How to Set Your Project Up With Sass

If you're here, I'm going to assume you already know what Sass is and just want to do the damn thing.

This guide is also specific to the .scss syntax of Sass.

Install Sass 🌎

• This assumes you already have a package.json file. If not, run npm init and enter through for the default values.

• Run npm install node-sass to install node-sass

Setup Your File Structure ⚙

• In your root directory, create a styles folder with an scss folder and a css folder

• In /sass, create the file main.scss

• In /css, create the file style.css
  

├─ styles/
│  ├─ sass/
│  │  ├─ main.scss
│  ├─ css/
│  │  ├─ style.css

See Organizing Sass Files section for more details on recommended file structure.

Watch Changes To Sass Files 🔍

• In package.json, within the "scripts:" section add "sass": "node-sass sass/main.scss css/style.css -w" like so:

  "scripts": {
    "sass": "node-sass styles/sass/main.scss styles/css/style.css -w"
  },

The watch flag (-w) tells node-sass to watch the main.scss file in the styles/sass directory for changes and output them in style.css in the styles/css directory.

This also assumes your styles folder is in the root directory. You may need to adjust these filepaths if you're using something like React or Vue and have your styles folder in the src directory, for example.

• In a terminal instance, run npm run sass to watch for changes to your .scss files and automatically compile them into css.

Partials 🔸

The only thing in your main.scss folder should be imports of your other .scss files, also known as partials.

All partials begin with an underscore (_).

• Create another folder within your /scss directory such as test.

• Add an .scss file within the /test directory such as _test.scss.

• Import the partial file into your main.scss file:
  

@import "test/test";

You do not need to include the underscore or the file extension in the imports.

Test it out 🧪

• In your _test.scss file, add something like:

$red: red; // declare a variable

h1 {
  color: $red;
}

• Save the file. You shouldn't see any errors in the terminal if sass compiled successfully. You should see the h1s on your page update to red. If you go to css/style.css you should see the compiled css:

h1 {
  color: red;
}

• If you do not see the color update or the compiled CSS, ensure you have npm run sass running in a terminal instance.

Organizing Sass Files 📚

There are many ways to organize your Sass files, and it really comes down to personal preference.

The 7-1 Architecture is a popular structure for larger projects, although I personally find it a bit overkill for smaller personal projects.

However, you will thank yourself for having a solid file architecture in place if your project ever grows or scales.

Here's what I usually start out with, and then add from there:

├─ styles/
│  ├─ sass/
│  │  ├─ abstract/
│  │  │  ├─ _variables.scss      // variable declarations
│  │  │  ├─ _mixins.scss          // mixin declarations
│  │  ├─ base/
│  │  │  ├─ _base.scss             // *, html, body styles / CSS reset
│  │  │  ├─ _typography.scss  // typography-related styles
│  │  ├─ components/             // reusable components styles eg. buttons
│  │  │  ├─ _component1.scss
│  │  │  ├─ _component2.scss
│  │  ├─ layout/                        // layout components styles
│  │  │  ├─ _footer.scss
│  │  │  ├─ _header.scss
│  │  ├─ pages/                        // styles specific to pages 
│  │  │  ├─ _page1.scss
│  │  │  ├─ _page2.scss
│  │  ├─ main.scss
│  ├─ css/
│  │  ├─ style.css

and then your main.scss file would look like this:

@import "./abstract/variables";
@import "./abstract/mixins";

@import "./base/base";
@import "./base/typography";

@import "./layout/section";
@import "./layout/header";
@import "./layout/footer";

@import "./pages/page1";
@import "./pages/page2";

@import "./components/component1";
@import "./components/component2";

✨TL;DR: Install node-sass and use a script to watch for changes in your SCSS files to automatically compile them to CSS.

Thanks for reading. Feel free to connect with me on LinkedIn!

Comments

[Mohamed Yamani]

Great article, short and straight to the point. Lovely work <3

I would suggest you update the installation part, we now install via the command npm install sass instead of npm install node-sass.

[George WL]

Well, technically node-sass is valid to use, it's just slowly being depreciated in favour of the official implementation (aka dart-sass), rather than the officially supported but not officially maintained older package.

[Mohamed Yamani]

Exactly

[adamddurrant]

@darian This would make a great Github repo to have a starter sass file structure with everything organised like this.

Do you have to import base and abstract files into all of the individual pages/components/layout and base?

[The-architect]

Very helpful. Thank you!