SCSS vs SASS Indented Syntax

SASS offers two distinct syntaxes. The original indented syntax (file extension .sass) uses indentation instead of curly braces and omits semicolons. It is terse and whitespace-sensitive, somewhat like Python. The newer SCSS syntax (file extension .scss) mirrors standard CSS — it uses curly braces, semicolons, and selectors exactly as CSS does, making the learning curve much gentler for developers already familiar with CSS. The SCSS syntax became the dominant choice in the community after its introduction in SASS 3.0. All CSS files are automatically valid SCSS, which means you can rename an existing .css file to .scss and start adding SASS features incrementally. This makes migration straightforward for existing projects. Both syntaxes support identical features — variables, nesting, mixins, functions, modules — and both compile to the same CSS output. Choosing between them is purely a matter of team preference. This course uses SCSS throughout because of its wider adoption and direct compatibility with CSS.

Example

// ── Side-by-side comparison: SCSS vs SASS indented syntax ────────────────────

// ── SCSS syntax (file: _button.scss) ─────────────────────────────────────────
$btn-bg    : #e74c3c;
$btn-color : #ffffff;
$btn-radius: 6px;

.btn {
    background-color : $btn-bg;
    color            : $btn-color;
    border-radius    : $btn-radius;
    padding          : 0.6rem 1.2rem;
    border           : none;
    cursor           : pointer;

    &:hover {
        background-color: darken($btn-bg, 8%);
    }

    &--large {
        padding   : 0.9rem 1.8rem;
        font-size : 1.125rem;
    }
}

// ── Equivalent SASS indented syntax (file: _button.sass) ─────────────────────
// $btn-bg    : #e74c3c
// $btn-color : #ffffff
// $btn-radius: 6px
//
// .btn
//     background-color : $btn-bg
//     color            : $btn-color
//     border-radius    : $btn-radius
//     padding          : 0.6rem 1.2rem
//     border           : none
//     cursor           : pointer
//
//     &:hover
//         background-color: darken($btn-bg, 8%)
//
//     &--large
//         padding   : 0.9rem 1.8rem
//         font-size : 1.125rem

HTML

Full Editor

Related Resources

SASS / SCSS Reference

Complete tag & property list

SASS / SCSS How-To Guides

Step-by-step practical guides

SASS / SCSS Exercises

Practice what you've learned