SCSS in three minutes

10 March 2019

.

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!

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 Stackoverflow 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 article

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 webpack, gulp, grunt, broccoli, brunch or whatever you’re using.

So let’s install node-sass which will handle building our scss files. In our project root let’s install it via npm.

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:

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

Curious what npx is? Read about it here Basically it allows us a quickly call a node package and in this case call a local package. 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

cd scss & touch app.scss

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

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

.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!