DEV Community

Cover image for How to Set Your Project Up With Sass
Darian Nocera
Darian Nocera

Posted on • Updated on • Originally published at blog.darnocer.io

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
Enter fullscreen mode Exit fullscreen mode

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"
  },
Enter fullscreen mode Exit fullscreen mode

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";
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode
  • 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;
}
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode

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";
Enter fullscreen mode Exit fullscreen mode

โœจ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!

Top comments (5)

Collapse
 
yamanidev profile image
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.

Collapse
 
georgewl profile image
George WL • Edited

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.

Collapse
 
yamanidev profile image
Mohamed Yamani

Exactly

Collapse
 
adamddurrant_23 profile image
adamddurrant • Edited

@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?

Collapse
 
sethearchitect profile image
The-architect

Very helpful. Thank you!