SCSS vs Sass — Syntax Differences and When to Use Each

In this tutorial, you will learn about SCSS vs Sass. We cover key concepts, practical examples, and best practices to help you master this topic.

SCSS and Sass are two syntaxes for the same preprocessor. SCSS uses curly braces and semicolons like CSS. Sass uses indentation-based syntax without braces or semicolons.

What You'll Learn

You will learn the key differences between SCSS and Sass syntax, when to use each, how to convert between them, and why SCSS is the recommended choice.

Why It Matters

Choosing the right syntax affects team productivity. DodaTech uses SCSS exclusively because it is closer to CSS, easier for new developers to learn, and has better tooling support.

Real-World Use

All DodaTech projects use SCSS because it allows copying raw CSS directly into files without modification, easing the transition from CSS to Sass.

flowchart LR
    A[Installation] --> B[SCSS vs Sass]
    B --> C[SCSS Syntax]
    B --> D[Sass Syntax]
    B --> E[Conversion]
    C --> F[SCSS Recommended]
    style B fill:#c69,stroke:#c69,color:#fff
    style F fill:#22c55e,stroke:#16a34a,color:#fff

SCSS Syntax

SCSS uses curly braces {} and semicolons ; exactly like CSS:

$primary: #7c3aed;
$padding: 1rem;

.card {
  padding: $padding;
  border: 1px solid $primary;

  .card-title {
    font-size: 1.25rem;
    color: $primary;
  }
}

Expected output: CSS with .card and .card .card-title selectors, variables replaced with their values.

Any valid CSS is valid SCSS. You can copy-paste CSS into a .scss file and it compiles without changes.

Sass (Indented) Syntax

Sass uses indentation instead of braces and newlines instead of semicolons:

$primary: #7c3aed
$padding: 1rem

.card
  padding: $padding
  border: 1px solid $primary

  .card-title
    font-size: 1.25rem
    color: $primary

Expected output: Identical CSS to the SCSS version above.

Key differences:

• No curly braces — indentation defines blocks
• No semicolons — newlines end statements
• File extension is .sass instead of .scss

Converting Between Syntaxes

# SCSS to Sass
sass --scss input.scss output.sass

# Sass to SCSS
sass input.sass output.scss

Expected output: Converted files between syntaxes.

You can also use the sass-convert tool:

sass-convert style.scss style.sass
sass-convert style.sass style.scss

Feature Parity

Both syntaxes support the same features:

Why SCSS Wins

// You can paste CSS directly — it just works
.card {
  background: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

// Then gradually add Sass features
.card {
  background: $white;
  box-shadow: $shadow;

  &:hover {
    box-shadow: $shadow-hover;
  }
}

With Sass indented syntax, you must convert the CSS first. SCSS has:

• Better editor support (autocomplete, linting, formatting)
• Larger community and resources
• Easier onboarding for CSS developers
• Compatibility with CSS-in-JS and styled-components

Common Mistakes

1. Mixing Syntaxes in One File

You cannot use both SCSS and Sass syntax in the same file. Choose one per file.

2. Incorrect Indentation in Sass

Sass indented syntax uses 2-space indentation by convention. Inconsistent indentation causes compilation errors.

3. Forgetting Semicolons in SCSS

Unlike pure CSS, SCSS is forgiving about missing semicolons, but consistent use prevents issues.

4. Using .sass Extension for SCSS Code

Files with .sass extension are assumed to use indented syntax. SCSS code in .sass files will not compile.

5. Assuming Sass Syntax Is Faster

Both syntaxes produce identical output. The syntax choice is about readability and team preference, not performance.

Practice Questions

1. What file extension does SCSS use? .scss for SCSS syntax, .sass for indented syntax.

2. What defines code blocks in Sass indented syntax? Indentation (whitespace) defines nesting and blocks instead of curly braces.

3. Can you paste valid CSS into a SCSS file? Yes. Any valid CSS is also valid SCSS.

4. How do you convert a SCSS file to Sass syntax? Use sass --scss input.scss output.sass or sass-convert input.scss output.sass.

5. Which syntax is more popular and why? SCSS is more popular because it is closer to CSS, has better tooling, and allows direct CSS pasting.

Challenge

Take a 30-line CSS file and write it in both SCSS and Sass syntax. Compile both to CSS and verify the outputs are identical.

FAQ

Mini Project

Take an existing CSS stylesheet (30+ lines). Save it as SCSS (rename to .scss). Add 3 variables for repeated values and nest 2 sets of related selectors. Confirm it compiles to valid CSS.

What's Next

Master Sass Variables for storing reusable values. Then learn Sass Data Types for understanding value types.