What Is SASS and Why Use It

// ── What SASS/SCSS looks like vs plain CSS ───────────────────────────────────

// 1. SASS variables  (compile-time, replaced by value in output)
$brand-color : #3498db;
$font-stack  : 'Helvetica Neue', Helvetica, sans-serif;
$base-radius : 4px;

// 2. Nesting (mirrors HTML hierarchy)
nav {
    background: $brand-color;

    ul {
        margin  : 0;
        padding : 0;
        list-style: none;
    }

    li { display: inline-block; }

    a {
        color      : #fff;
        padding    : 0.5rem 1rem;
        text-decoration: none;

        &:hover { text-decoration: underline; }
    }
}

// 3. The above compiles to clean, flat CSS:
// nav { background: #3498db; }
// nav ul { margin: 0; padding: 0; list-style: none; }
// nav li { display: inline-block; }
// nav a { color: #fff; padding: 0.5rem 1rem; text-decoration: none; }
// nav a:hover { text-decoration: underline; }