Install / Compile

# ===== Install (npm) =====
npm install -D sass

# This installs Dart Sass (current). Node Sass is deprecated; do not start new projects on it.

# ===== Vite =====
# Just install sass; Vite auto-detects .scss imports.
# main.ts -> import './styles.scss'
# styles.scss:
$primary: #2d6cdf;
.btn { background: $primary; color: white; }

# ===== Webpack =====
npm install -D sass sass-loader css-loader style-loader
# webpack.config.js
module: {
  rules: [
    { test: /\.s[ac]ss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
  ],
}

# ===== Standalone (no bundler) =====
npx sass src/styles.scss dist/styles.css --watch
npx sass src/styles.scss dist/styles.css --style=compressed --no-source-map

# ===== Project layout =====
# src/styles/
#   _variables.scss
#   _reset.scss
#   _components.scss
#   main.scss   <- @use the partials

# main.scss
@use 'variables' as v;
@use 'reset';
@use 'components';

.btn { background: v.$primary; }

# Partials start with _; they aren't compiled to their own .css.

# ===== Modern Sass (Dart Sass) features =====
# @use / @forward (replaces @import)
# Modules: sass:math, sass:color, sass:string
# Built-in functions: math.div, color.adjust, string.unquote

# ===== Source maps =====
# Dev: enabled by default (--embed-source-map for inline)
# Prod: --no-source-map or external (--source-map but not embedded)

# ===== Verify =====
npx sass --version       # 1.x.x (Dart)

# ===== Patterns to internalise =====
# - Partials by concern (_variables, _typography, _components)
# - @use over @import; modern, namespaced, faster
# - Compressed output in prod; expanded with source maps in dev
# - Keep nesting shallow (3 levels max)

# ===== Pitfalls =====
# - Importing node-sass instead of sass; do not
# - Editing compiled .css by hand -> blown away on next build
# - 5+ levels of nesting -> unreadable output
# - Missing the build step in CI -> stale CSS shipped

npm install -D sass
# or via Vite/Webpack — they detect .scss imports automatically.
sass input.scss output.css