Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

// ── 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