What's the difference between CSS, SASS, and SCSS?

When I wrote QWERTYBall, I was especially eager to get it working and looking how I wanted. If I wanted a certain feature, I'd read a tutorial on how to add it, and do whatever the tutorial said to do. In the process, I ended up with a lot of extra files I didn't need.

In the interest of streamlining the app I wrote all those months ago, I recently revisited the code and found I had CSS files, SASS files, and SCSS files. The problem is that I had no idea what SASS or SCSS was, so I set out to learn. Here's what I found.

CSS

CSS stands for Cascading Style Sheets. Before CSS, there wasn't any formal separation between the code that defined how a webpage looked and the content featured on that webpage. This lack of separation made it laborious to update the look of a webpage because you had to hunt all over to find and change the fonts, colors, margins, and anything else.

SASS

SASS stands for Syntactically Awesome Style Sheets. In 2006, SASS was developed to solve the problem of excessive repetition in CSS by allowing for variables, nesting, and mixins (a pre-defined group of styles). SASS also added programmatic features such as arguments, loops, and conditional logic. The authors of SASS also decided to change the syntax a bit by eliminating the need for semicolons and curly braces. Instead, the syntax is "whitespace-sensitive" and must have proper indentation. SASS is a CSS "pre-processor" and outputs traditional CSS so any slightly modern browser can implement it.

SCSS

SCSS stands for Sassy CSS, and it's a newer syntax for SASS. It's simply CSS with the same featureset as SASS but requires semicolons and curly braces just like CSS. In fact, you can convert any CSS file to SCSS by changing the doc type from .css to .scss because SCSS is an extension of the syntax of CSS.

Examples

Here's some CSS for two buttons. Following is how you would accomplish the same goal using SASS and SCSS.

CSS

.button.danger {
  border: 1px solid black;
  background: hsl(0, 100%, 50%);
}

.button.warning {
  border: 1px solid black;
  background: hsl(60, 100%, 50%);
}

SASS

$red: hsl(0, 100%, 50%)
$yellow: hsl(60, 100%, 50%)
$neutral: hsl(0, 0%, 0%)

=myBtn($bdr, $bg) 
  border: 1 px solid $bdr
  background: $bg

button 
  danger 
    +myBtn($neutral, $red)

  warning 
    +myBtn($neutral, $yellow)

SCSS

$red: hsl(0, 100%, 50%);
$yellow: hsl(60, 100%, 50%);
$neutral: hsl(0, 0%, 0%);

@mixin myBtn($bdr, $bg) {
  border: 1 px solid $bdr;
  background: $bg;
}

button {
  danger {
    @include myBtn($neutral, $red);
  }
  warning {
    @include myBtn($neutral, $yellow);
  }
}