CSS Preprocessor Features Cheat Sheet

/* SCSS */
/* SCSS variables are compile-time substitutions. They cannot be changed at
   runtime, cannot be inspected in DevTools, and cannot vary by selector scope. */
/*
$primary: royalblue;
$radius: 6px;

.button {
    background: $primary;
    border-radius: $radius;
}
*/

/* Native CSS */
/* Custom properties are runtime values. They live in the cascade, can be
   redefined per selector, and JavaScript can read or write them. */
:root {
    --primary: royalblue;
    --radius: 6px;
}

.button {
    background: var(--primary);
    border-radius: var(--radius);
}

/* Scoped override: a card with a different accent color, no extra class needed
   on every nested element. SCSS variables cannot do this. */
.card.danger {
    --primary: crimson;
}

.card.danger .button {
    /* Picks up the locally-redefined --primary automatically. */
    background: var(--primary);
}

/* SCSS */
/* SCSS has had nesting since 2006. The & references the parent selector. */
/*
.menu {
    font-size: 1rem;

    .item {
        padding: 0.5rem 1rem;

        &:hover {
            background: #f0f0f0;
        }

        &.active {
            font-weight: 700;
        }
    }
}
*/

/* Native CSS */
/* The CSS Nesting Module (broadly supported since late 2023) brings the same
   syntax to the browser with no compiler. */
.menu {
    font-size: 1rem;

    .item {
        padding: 0.5rem 1rem;

        &:hover {
            background: #f0f0f0;
        }

        &.active {
            font-weight: 700;
        }
    }
}

/* The & is REQUIRED in native CSS when the nested selector starts with a
   pseudo-class, attribute, or element selector; SCSS allowed it implicitly,
   native CSS does not. Always use & to be safe. */
.toggle {
    background: white;

    /* Native: must write &:checked, not :checked. */
    &:checked {
        background: dodgerblue;
    }
}

/* SCSS */
/* Mixins encapsulate reusable declarations and accept arguments. */
/*
@mixin button-base($bg, $fg: white) {
    background: $bg;
    color: $fg;
    padding: 0.5rem 1rem;
    border: 0;
    border-radius: 4px;
}

.btn-primary {
    @include button-base(royalblue);
}

.btn-danger {
    @include button-base(crimson, white);
}
*/

/* Native CSS */
/* Native @function and @mixin proposals exist but are not widely shipped yet.
   The closest stable equivalent today is a custom-property bundle plus a base
   class that consumers extend. */
.btn-base {
    background: var(--btn-bg, royalblue);
    color: var(--btn-fg, white);
    padding: 0.5rem 1rem;
    border: 0;
    border-radius: 4px;
}

.btn-danger {
    --btn-bg: crimson;
}

/* @layer (Cascade Layers) is the native answer to "how do I keep utility
   classes from accidentally beating my framework styles". Layers declared
   first lose to layers declared later, regardless of selector specificity. */
@layer reset, framework, components, utilities;

@layer reset {
    * { box-sizing: border-box; }
}

@layer framework {
    .btn-base {
        background: var(--btn-bg, royalblue);
        color: var(--btn-fg, white);
    }
}

@layer utilities {
    .text-center { text-align: center; }
}