SCSS in three minutes
Tags: css, scss, webdev
Published: 2019-04-28 15:43:35

---
title: SCSS in three minutes
published: true
cover_image: https://thepracticaldev.s3.amazonaws.com/i/y8me3qjsq5uq7df15bx3.png
description: SCSS is a superset of CSS3's syntax. It provides a powerful abstraction with the ability to use variables, mixins, and functions. Intrigued? Let's get it setup in 3 minutes or less!
tags: css, scss, web-dev
---

## Our favorite resources
* [Official Docs](https://sass-lang.com/documentation/file.SASS_REFERENCE.html)
* [The complete guide to SCSS/SASS](https://medium.freecodecamp.org/the-complete-guide-to-scss-sass-30053c266b23)
</div>


## Wait, wait, what is it?
Before we go racing off, it might be good to talk about what is SASS/SCSS. SCSS is a preprocessor which means it needs to be processed down to another format (css) and is a superset of CSS. That just means we get to use features that aren't part of the CSS standard and move a bit faster when writing css. Since SCSS is a superset of CSS it also means that regular old CSS is valid SCSS, and that makes transitioning from CSS to SCSS that much easier and just requires you to rename some files. We've been throwing around SCSS and then linking to SASS so you might be wondering what the difference between the two is...This <a href="https://stackoverflow.com/questions/5654447/whats-the-difference-between-scss-and-sass" target="_blank">Stackoverflow</a> answer sums it up nicely, but basically SCSS is the newer version and the two are just two different syntaxes. We recommend you use SCSS. Want to learn more about what exactly SCSS is? Check this <a href="https://www.dailysmarty.com/posts/what-is-scss" target="_blank">article</a>

## Let's do this
We're a fan of keeping things as light weight as possible so we're just going
to opt for a npm script to coordinate the scss compilation process. This could
easily be changed to integrate with <a href="https://webpack.js.org/">webpack</a>, <a href="https://gulpjs.com/" target="_blank">gulp</a>, <a href="https://gruntjs.com/" target="_blank">grunt</a>, <a href="https://github.com/broccolijs/broccoli" target="_blank">broccoli</a>, <a href="https://brunch.io/" target="_blank">brunch</a> or whatever you're using.

So let's install <a href="https://github.com/sass/node-sass" target="_blank">node-sass</a> which will handle building our scss files. In our project root let's install it via npm.

```javascript
npm install --save node-sass
```

Now we need to add in a script to watch when we edit scss files and compile
them down into valid css files. So we'll add in a npm script to handle that:

```javascript
"scripts": {
    "scss": "npx node-sass -w scss/app.scss -o assets/css/"
  }
```

Curious what npx is? <a href="https://blog.npmjs.org/post/162869356040/introducing-npx-an-npm-package-runner" target="_blank">Read about it here.</a> Basically it allows us a quickly call a node package and in this case call a local package. As noted in the comments, we don't even have to write npx at the beginning since we're calling it via a npm script so could also just write `node-sass -w scss/app.scss -o assets/css/`. We then tell node-sass to watch our scss file app.scss and output the result into our assets directory inside the css directory. Let's make some scss files

```bash
cd scss & touch app.scss
```

Let's add some scss to our app.scss file:

```css
$black: #000000;
.container {
    margin: 0 auto;
        &:hover {
            border: 1px solid $black;
        }
}
```

Now if we check what's in our css directory we'll see this:

```css
.container {
  margin: 0 auto; }
  .container:hover {
    border: 1px solid black; }
```

Cool! It took our scss and outputted valid css that we can use. Let's see a video of all this in action, in under 3 minutes!

![gif of process](https://www.dev-diaries.com/assets/images/scss-in-three.gif)

[Original Post on Dev Diaries](https://www.dev-diaries.com/blog/scss-in-three-minutes/)