So you’ve been writing Cascading Style Sheets (CSS) and heard about SCSS? Well it was only a matter of time. If you’re comfortable with writing CSS then moving to a preprocessor like SCSS is a great step up.

If you’re just getting started with CSS, you should hold off SCSS and check out MDN’s getting started section.

What is SCSS?

Syntactically Awesome Stylesheets (SCSS).

Did you notice the obvious mistake?

There seems to be some confusion around Sass/SCSS and both options get used interdependently, but there is an important difference.

SCSS is the later version of the original Sass syntax and they don’t play together.

Check here for more info on the two syntaxes.

So what is SCSS? It’s Sassy CSS.

With that out of the way, lets start looking at some of the most commonly used features in SCSS.