Tooling & Workflow

Sass CLI

The sass command-line tool compiles .scss to .css. Install globally with npm install -g sass or use npx sass. Key flags: --watch for auto-recompilation, --style for output format, --load-path for import resolution.

Use --load-path (or -I) to add node_modules to the import path. This enables @use "bootstrap/scss/functions" without relative paths.

• Use npx sass to run without global install
• --poll enables watch on network filesystems
• --verbose shows each file being compiled

# Install locally in project
npm install -D sass

# package.json scripts
{
  "scripts": {
    "scss:watch": "sass --watch src/scss:public/css --source-map",
    "scss:build": "sass src/scss:public/css --style=compressed"
  }
}

Bundler Integration

Modern bundlers handle Sass natively. Vite processes .scss imports with zero config. Webpack requires sass-loader, css-loader, and mini-css-extract-plugin. Next.js supports Sass out of the box with npm install sass.

Import Sass files directly in JavaScript/TypeScript entry points. The bundler compiles, autoprefixes, and bundles CSS alongside JavaScript.

// Vite / Next.js — just import
import './styles/main.scss';

// webpack.config.js
{
  test: /\.scss$/,
  use: ['MiniCssExtractPlugin.loader', 'css-loader', 'sass-loader'],
}

Live Reloading

Live reload recompiles Sass and refreshes the browser on save. Vite HMR updates CSS without full page reload. Browser-sync works with the Sass CLI --watch flag for static sites.

CSS HMR preserves page state — form inputs and scroll position survive style updates. This makes UI iteration significantly faster than full reloads.

// vite.config.js — zero config needed
// Sass HMR works automatically

// Browser-sync with Sass CLI
// Terminal 1: sass --watch src:dist
// Terminal 2: browser-sync start --server dist --files dist

Stylelint for Sass

Stylelint lints SCSS with stylelint-config-standard-scss. It catches nesting depth violations, invalid mixin names, and duplicate properties. Integrate with VS Code for inline warnings and pre-commit hooks for CI enforcement.

Configure rules to match your architecture — max-nesting-depth, selector-class-pattern for BEM, and scss/dollar-variable-pattern for token naming.

{
  "extends": ["stylelint-config-standard-scss"],
  "rules": {
    "max-nesting-depth": 3,
    "selector-class-pattern": "^[a-z][a-z0-9]*(-[a-z0-9]+)*(__[a-z0-9]+(-[a-z0-9]+)*)?(--[a-z0-9]+(-[a-z0-9]+)*)?$",
    "scss/dollar-variable-pattern": "^[a-z][a-z0-9-]*$"
  }
}

IDE Support

VS Code extensions like Sass (.scss) and Live Sass Compiler provide syntax highlighting, autocomplete, and go-to-definition for variables and mixins. Configure file associations if .scss files are not recognized.

Enable Emmet in SCSS files for rapid HTML-style abbreviation expansion. Tab completion for @include and @mixin saves significant typing in mixin-heavy files.

// .vscode/settings.json
{
  "files.associations": { "*.scss": "scss" },
  "scss.lint.unknownAtRules": "ignore",
  "emmet.includeLanguages": { "scss": "css" }
}