How to Set Your Project Up With Sass
Tags: sass
Published: 2020-12-14 23:35:19

If you're here, I'm going to assume you already know what [Sass](https://sass-lang.com/) is and just want to do the damn thing. 

This guide is also specific to the [`.scss` syntax](https://sass-lang.com/documentation/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](#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: 

```json
  "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:
```scss
@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: 

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

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

```bash
├─ 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:

```scss
@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](https://linkedin.com/in/darian-nocera/)!_