Intro

// ===== The idea =====
// Sass is a preprocessor: write SCSS (or indented Sass), compile to CSS.
// Browsers never see Sass; the build outputs CSS files they understand.

// ===== Variables + nesting =====
$primary: #2d6cdf;
$radius: 8px;

.card {
  background: white;
  border-radius: $radius;
  padding: 1rem;

  &__title {        // BEM-style nested selector compiles to .card__title
    font-weight: 600;
  }

  &:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
  }
}

// ===== Mixins =====
@mixin button($bg: $primary) {
  background: $bg;
  color: white;
  padding: .5rem 1rem;
  border-radius: $radius;
  &:hover { filter: brightness(.95); }
}

.btn-primary { @include button; }
.btn-danger  { @include button(#e11); }

// ===== Functions =====
@use 'sass:math';
@function spacing($n) { @return math.div($n, 4) * 1rem; }
.section { padding: spacing(8); }   // 2rem

// ===== Modules (@use) =====
// _colors.scss
$brand: #2d6cdf;

// styles.scss
@use 'colors';                       // namespaced
.btn { background: colors.$brand; }

// ===== Partials =====
// Files prefixed with _ aren't compiled directly.
// styles/
//   _colors.scss
//   _typography.scss
//   main.scss   <- @use the partials

// ===== Build =====
// Dart Sass is current:
//   npm i -D sass
//   npx sass src/styles.scss dist/styles.css --watch

// ===== When Sass wins =====
// - Large stylesheets that benefit from variables, mixins, modules
// - Teams with deep CSS skills
// - Frameworks like Bootstrap / Bulma (built in Sass)
// - Predictable cross-browser CSS output

// ===== When Sass hurts =====
// - You're already using a utility framework (Tailwind) — minimal overlap
// - CSS-in-JS shop where styles live in components
// - You'll forget to run the build step (CI should enforce)

// ===== Patterns to internalise =====
// - Partials by concern (_colors, _typography, _components)
// - @use over @import; modern, namespaced, faster
// - Mixins for repeated patterns; functions for computed values
// - Keep nesting shallow (max 2-3 levels)

// ===== Pitfalls =====
// - 5+ levels of nesting -> impossible-to-read CSS output
// - Editing compiled .css by hand -> blown away on next build
// - Using @import (deprecated) instead of @use
// - Treating Sass like a programming language (it's not; keep logic minimal)

// Sass adds variables, nesting, mixins, functions to CSS.
// Compiles down to plain CSS.