What's the difference between SCSS and Sass?

Sass is a CSS pre-processor with syntax advancements. Style sheets in the advanced syntax are processed by the program, and turned into regular CSS style sheets. However, they do not extend the CSS standard itself.

The main reason for this is the addition of features that CSS painfully lacks (like variables).

Re the difference between SCSS and Sass, the text on the Sass home page should answer the question:

Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

Sass has two syntaxes. The new main syntax (as of Sass 3) is known as “SCSS” (for “Sassy CSS”), and is a superset of CSS3’s syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss.

The second, older syntax is known as the indented syntax (or just “Sass”). Inspired by Haml’s terseness, it’s intended for people who prefer conciseness over similarity to CSS. Instead of brackets and semicolons, it uses the indentation of lines to specify blocks. Although no longer the primary syntax, the indented syntax will continue to be supported. Files in the indented syntax use the extension .sass.

However, all this works only with the Sass pre-compiler which in the end creates CSS. It is not an extension to the CSS standard itself.

The Sass .sass file is cleaner than .scss file e.g.

example.sass

$color: red

=my-border($color)
  border: 1px solid $color

body
  background: $color
  +my-border(green)

example.scss

$color: red;

@mixin my-border($color) {
  border: 1px solid $color;
}

body {
  background: $color;
  @include my-border(green);
}

Any valid CSS document can be converted to Sass simply by changing the extension from .css to .scss.