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.
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:
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
Let’s add some scss to our app.scss file:
Now if we check what’s in our css directory we’ll see this:
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!