What is SCSS and how do I get started?

scss
resources

#1

I think it has something to do with packaging or formatting CSS but I’m unclear where to start learning about SCSS.


Reading list category
#2

SCSS is the file extension used by the Sass project, which is an extension to vanilla CSS that provides advanced features developers wish CSS had. For example, variables and reusable snippets of code that you can encapsulate in functions to avoid repeating the same code over and over again (a big problem for maintenance as your project grows larger.)

There are many places where you can learn about it. The official documentation is a good place to start: https://sass-lang.com/guide, but other tutorials are available in the web. A quick web search will lead you to many of them (here’s one: https://scotch.io/tutorials/getting-started-with-sass)


#3

Hi Alison!

@zxul767 has it—SCSS extends plain css so that you can use additional syntax to make your CSS clearer and more concise. Here is a quick intro to some of my favorite features in Sass (full disclosure: I wrote the linked blog post)


#4

I have often been confused by the fact that SASS and SCSS both exist. They are two different syntaxes for “Sass”. Personally, I’ve only worked with SCSS, and as this article mentions, I think it is the more common syntax, but I personally don’t know that for sure. It is good to be aware of both in any case.

This article explains it well: https://responsivedesign.is/articles/difference-between-sass-and-scss/


#5

People have already addressed what SCSS is, so here’s a couple more ways to get started:

  • To play around with it, I suggest searching CodePen for examples. You can fork them and change up the SCSS to see how it works! Here’s one that shows 10 cool hover effects: https://codepen.io/caraujo/pen/LVPzxO

    • In the CSS panel, you’ll see some of the cool features other people have mentioned, like variables (indicated by a $), and nested rulesets. You can also View Compiled CSS from the CSS panel’s down arrow menu to see how the resulting CSS would look like. Speaking of compiling…
  • When you want to use SCSS for a project, you’ll need to compile your .scss files to regular .css files, so the browser can read them. There are a number of ways you can do this: build tools often will have an extension or package that you can add to do this, or you can install the Sass CLI as explained on their Install page. This was the thing that took a while to sink in when I was first starting to use Scss, so I wanted to make sure it was explicitly mentioned.