DEV Community

Cover image for SCSS in three minutes
Dev Diaries
Dev Diaries

Posted on

SCSS in three minutes

Our favorite resources

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

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

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

cd scss & touch app.scss
Enter fullscreen mode Exit fullscreen mode

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

$black: #000000;
.container {
    margin: 0 auto;
        &:hover {
            border: 1px solid $black;
        }
}
Enter fullscreen mode Exit fullscreen mode

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

.container {
  margin: 0 auto; }
  .container:hover {
    border: 1px solid black; }
Enter fullscreen mode Exit fullscreen mode

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

Original Post on Dev Diaries

Top comments (4)

Collapse
 
quintisimo profile image
Quintus Cardozo

If you have the node-sass package locally installed in the project and call it through an npm script, you don't need to prefix the command with npx

Collapse
 
devdiaries profile image
Dev Diaries • Edited

Good point, thanks! In this case I wanted to keep it as explicit as possible and also use that opportunity to explain what npx was. Updated the article to mention the fact that you don't have to write npx at the beginning

Collapse
 
quintisimo profile image
Quintus Cardozo

I see, really helpful article btw for people starting out with SCSS

Thread Thread
 
devdiaries profile image
Dev Diaries

Thanks, really appreciate it and feedback always welcome 💯