What 's the difference between SCSS and Sass?

SCSS (Sassy CSS) and Sass (Syntactically Awesome Style Sheets) are both CSS preprocessors that extend the capabilities of CSS, enabling developers to utilize advanced features such as variables, conditional statements, loops, inheritance, and mixins when writing style sheets. Although both represent different syntax variants of the same project, they differ in syntax and usage.

1. Syntax Differences

• Sass is also known as indented syntax (or old Sass syntax) because it uses indentation instead of braces and semicolons to delimit code blocks and properties. This results in cleaner formatting, similar to other indentation-based languages like Python.

  Example (Sass):

  sass
  $primary-color: #333
  
  body
    font: 100% $primary-color
    background-color: #fff

• SCSS syntax closely mirrors standard CSS, using braces and semicolons. Consequently, any valid CSS code is also valid SCSS code, making it easier for developers familiar with CSS to adopt.

  Example (SCSS):

  scss
  $primary-color: #333;
  
  body {
    font: 100% $primary-color;
    background-color: #fff;
  }

2. Compatibility

• Sass syntax has historically had limited compatibility with CSS, as it cannot directly use CSS files. Migrating existing CSS to Sass requires rewriting the syntax.

• SCSS benefits from strong syntax compatibility, allowing existing CSS files to be renamed to a .scss extension and used directly, with SCSS features introduced incrementally.

3. File Extensions

• Sass files typically use the .sass extension.

• SCSS files typically use the .scss extension.

4. Community and Tool Support

Over time, SCSS has gained broader community and tool support due to its syntax being closer to traditional CSS.

Example

In a previous project, we needed to migrate an old CSS codebase to a more modern CSS preprocessor. Based on the team's familiarity with traditional CSS and the toolchain support, we selected SCSS. This enabled us to easily rename existing CSS files to a .scss extension and immediately leverage SCSS's advanced features, such as variables and mixins, with minimal changes to the existing code structure.

In summary, SCSS and Sass provide the same feature set, with the choice depending on developer preference and project requirements. In practice, SCSS is more widely adopted due to its higher compatibility and ease of use.

The syntax is different, which is the main advantage (or disadvantage, depending on your perspective).

I'll try not to repeat what others have said, as you can easily search for it on Google, but instead, I want to share some insights based on my experience using both (sometimes even in the same project).

Sass (.sass syntax)

• Cleaner - if you come from Python, Ruby (where you can even use similar syntax for props), or even CoffeeScript, it feels very natural to write mixins, functions, and other reusable code in .sass compared to .scss (subjective), as it's more readable.

Sass Disadvantages

• Whitespace-sensitive (subjective) – I don't mind it in other languages, but in CSS it's frustrating (e.g., issues with copying, tab vs space conflicts).
• No inline rules (which is destructive to me) – you can't write body color: red as you would in .scss with body {color: red}.
• Importing vendor CSS, copying plain CSS snippets – not impossible, but it gets boring after a while. Solution: include .scss files in the project (along with the files) or convert them to .sass.

Otherwise, they do the same job.

Now, what I like to do is write mixins and variables in .sass, and code that compiles to CSS in .scss when possible (e.g., Visual Studio doesn't support .sass, but when I work on Rails projects, I usually combine both rather than in a single file, of course).

Recently, I've been considering giving Stylus a try (as a full-time CSS preprocessor) because it allows you to combine both syntaxes in one file (along with some other features). For a team, this might not be a good direction, but when you're maintaining it alone – no problem. When syntax issues arise, manual coding is actually the most flexible.

Finally, here's a comparison of the mixin syntax between .scss and .sass:

scss
@mixin cover {
  $color: red;
  @for $i from 1 through 5 {
    &.bg-cover#{$i} { background-color: adjust-hue($color, 15deg * $i) }
  }
}
.wrapper { @include cover }

sass
=cover
  $color: red
  @for $i from 1 through 5
    &.bg-cover#{$i}
      background-color: adjust-hue($color, 15deg * $i)
.wrapper
  +cover

Sass is a CSS preprocessor with improved syntax. Style sheets written in advanced syntax are compiled into standard CSS style sheets. However, Sass does not extend the CSS standard itself.

CSS variables are supported and can be used, but they are less feature-rich than Sass's preprocessor variables.

For the difference between SCSS and Sass, the text on the Sass documentation page should answer this question:

SCSS syntax uses the .scss file extension. Except for a few minor exceptions, it is a superset of CSS, meaning that essentially all valid CSS is also valid SCSS. Since it is similar to CSS, it is the easiest to learn and most popular syntax.

The indented syntax is Sass's original syntax, so it uses the .sass file extension. Due to this extension, it is sometimes referred to as "Sass". The indented syntax supports all the same features as SCSS, but it uses indentation instead of curly braces and semicolons to define the document structure.

However, all of this is only usable with the Sass preprocessor, which ultimately generates CSS. It is not an extension of the CSS standard itself.

Sass .sass files visually differ from .scss files, for example:

Example.sass - Sass is the older syntax

sass
$color: red

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

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

Example.scss - Sassy CSS is the new syntax in Sass 3

scss
$color: red;

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

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

Simply change the extension from .css to .scss, and any valid CSS document can be converted to Sassy CSS (SCSS).