Logo
Back

What's the difference between SCSS and Sass?

SCSS (Sassy CSS) and Sass (Syntactically Awesome Style Sheets) are two syntaxes for the same preprocessor—Sass. They share the same language features but differ in syntax style:

  • SCSS syntax is closer to traditional CSS, using curly braces and semicolons.
  • Sass (“indented” syntax) omits curly braces and semicolons, relying on indentation to separate code blocks.

Both compile into standard CSS with the same feature set.

1. The Two Syntaxes in a Nutshell

SCSS Syntax (CSS-like)

// style.scss
$primary-color: #3498db;

body {
  margin: 0;
  color: $primary-color;

  .header {
    background: darken($primary-color, 10%);
  }
}
  • Uses curly braces {} and semicolons ; similar to CSS.
  • Any valid CSS is also valid SCSS.

Sass (Indented) Syntax

// style.sass
$primary-color: #3498db

body
  margin: 0
  color: $primary-color

  .header
    background: darken($primary-color, 10%)
  • No braces, no semicolons; indentation determines nesting.
  • Whitespace-sensitive: the number of spaces or tabs matters.

2. Core Differences

  1. Syntax Style

    • SCSS: CSS-like syntax. Many CSS developers find it familiar because valid CSS is also valid SCSS.
    • Sass: Indented syntax, minimal punctuation, more concise but requires consistent indentation.

  2. File Extension

    • SCSS files typically end with .scss.
    • Sass indented syntax files typically end with .sass.

  3. Compatibility with CSS

    • SCSS is a superset of CSS. You can copy-and-paste existing CSS into an SCSS file, and it should compile without changes.
    • Sass indented syntax doesn’t accept normal CSS syntax; you must adjust formatting (remove braces, semicolons, etc.).

  4. Community and Examples

    • The SCSS syntax is more widely used in modern tutorials and code examples, especially for developers migrating from standard CSS.
    • The indented syntax has a more minimal look that some developers prefer for brevity.

3. Shared Features

Regardless of syntax, both SCSS and Sass share the same underlying language features provided by the Sass preprocessor:

  • Variables (e.g., $primary-color: #3498db;)
  • Nesting (nest CSS rules within one another)
  • Mixins and Functions (reusable code blocks and logic)
  • Extend / Inheritance (share rules among selectors)
  • Operators (e.g., color manipulations, math on units)
  • Imports and Partials (modularizing large stylesheets)

The only real difference is how you write the code; the compiled CSS output is identical.

4. Which One Should You Use?

  1. SCSS

    • Familiar to anyone comfortable with CSS.
    • Easier to adopt in a codebase with existing CSS files (just rename .css to .scss if needed).
    • Most modern Sass examples and libraries use .scss.

  2. Sass (Indented)

    • Fewer characters (no braces/semicolons). Some find it more “clean.”
    • Requires discipline around indentation; can confuse teams used to curly braces.

Ultimately, it’s about personal/team preference. Both syntaxes are official and fully supported by the Sass language.

Summary

  • SCSS: CSS-like syntax, widely used, straightforward for developers transitioning from CSS.
  • Sass: Indented syntax, minimal punctuation, more compact but whitespace-sensitive.
  • Same Features: Both compile to standard CSS using the Sass preprocessor.

Choose whichever syntax feels more natural or aligns best with your existing project style. The underlying functionality—variables, mixins, etc.—remains the same.

CONTRIBUTOR
TechGrind