Chepter 3: Sass Installation
Sass Installation — getting it running on your machine so you can actually write and compile .scss files.
I’m going to explain this like we’re sitting together on a video call, step-by-step, with the 2026 reality in mind (Dart Sass is the only serious choice now — everything else is legacy/deprecated).
Quick 2026 Reality Check (Super Important)
- Dart Sass = the official, actively maintained Sass (written in Dart, super fast, gets all new features first)
- Version as of Feb 2026 ≈ 1.97.x or higher
- Old ones are dead:
- Ruby Sass → stopped 2018–2019
- Node-sass / LibSass → deprecated years ago (security issues + no updates)
- So we only install Dart Sass today.
There are several good ways. For beginners (especially if you’re just learning), I recommend one of these top 3 — ordered from easiest to most flexible:
- VS Code + Live Sass Compiler extension → easiest, no terminal hassle, live reload (recommended for 90% of beginners)
- npm install -g sass → if you already use Node.js/npm (very common in web dev)
- Standalone binary (download from GitHub) → no dependencies, works everywhere
Let’s do each one in detail with exact steps.
Option 1: Easiest for Beginners → VS Code + Live Sass Compiler (Recommended Today)
This is what most new learners use in 2026 — zero command line needed at first.
Step-by-step:
-
Install VS Code (if not already) → https://code.visualstudio.com/ (free, ~2 min install)
-
Open VS Code → go to Extensions panel (Ctrl+Shift+X or left sidebar icon)
-
Search for “Live Sass Compiler” → Author: Ritwick Dey (still the most popular in 2026) → Install it (millions of downloads)
-
Create a test folder anywhere (Desktop → New Folder → “sass-test”)
-
Inside the folder create two files:
- index.html
- style.scss
-
Paste this into style.scss (quick test):
SCSS01234567891011121314151617$primary: #6c5ce7;body {background: lighten($primary, 35%);font-family: system-ui, sans-serif;padding: 4rem;h1 {color: $primary;text-align: center;}} -
Open index.html and add:
HTML01234567891011121314<!DOCTYPE html><html lang="en"><head><link rel="stylesheet" href="style.css"></head><body><h1>Sass is working! 🎉</h1></body></html> -
Right-click inside style.scss → you should see “Watch Sass” in the bottom status bar (or press Ctrl+Shift+P → type “Watch Sass”)
-
Click Watch Sass → it creates style.css automatically and watches for changes → Save .scss → CSS updates instantly
-
Open index.html in browser → you see purple background + heading → Change $primary: #e84393; → save → refresh browser → color changes live!
Pros: Super beginner-friendly, live preview, no terminal fear Cons: Tied to VS Code (but that’s fine — VS Code is king in 2026)
Option 2: Via npm (Best if You Already Use Node.js / Frontend Tools)
Most modern web devs (React, Vue, Vite, etc.) do this.
Prerequisites: Node.js + npm installed (If not → https://nodejs.org → LTS version → install → restart terminal)
Steps:
-
Open terminal / command prompt / PowerShell (anywhere)
-
Install globally (so you can use sass command everywhere):
Bash0123456npm install -g sass(Note: This installs the pure JS version — slightly slower but works everywhere. If you want fastest → use sass-embedded later, but not needed now.)
-
Verify:
Bash0123456sass --version→ Should show something like 1.97.3 or higher
-
Test compile (in your sass-test folder):
Bash0123456sass style.scss style.css→ Creates/updates style.css
-
Watch mode (auto compile on save — like Live Sass):
Bash0123456sass --watch style.scss:style.css→ Leave terminal open → edit .scss → saves → CSS updates
Pro tip: In real projects, add to package.json scripts instead of global:
|
0 1 2 3 4 5 6 7 8 |
"scripts": { "sass:watch": "sass --watch src/scss:dist/css" } |
Then npm run sass:watch
Option 3: Standalone (No Node, No Package Manager – Very Clean)
Good if you want zero dependencies.
-
Go to official releases: https://github.com/sass/dart-sass/releases/latest
-
Download for your system:
- Windows → dart-sass-1.XX.X-windows-x64.zip (or arm64 if needed)
- Mac → dart-sass-1.XX.X-macos-x64.tar.gz (or arm64 for M1/M2/M3)
- Linux → similar tar.gz
-
Extract the zip/tar → get folder called dart-sass
-
Inside → find sass (or sass.bat on Windows)
-
Add to PATH (so you can run sass from anywhere):
-
Windows:
- Right-click This PC → Properties → Advanced system settings → Environment Variables
- Under System variables → find Path → Edit → New
- Paste full path to the dart-sass folder (e.g. C:\Users\You\Downloads\dart-sass)
- OK all windows → restart terminal
-
Mac/Linux: Add to ~/.zshrc or ~/.bashrc:
Bash0123456export PATH="$HOME/path/to/dart-sass:$PATH"Then source ~/.zshrc
-
-
Test: sass –version
-
Use same as npm way: sass –watch style.scss:style.css
Other Options (Quick Mentions – 2026)
- Homebrew (Mac / Linux): brew install sass/sass/sass
- Chocolatey (Windows): choco install sass
- GUI apps (if you hate terminal): Prepros (paid, cross-platform), CodeKit (Mac paid)
But honestly — VS Code extension or npm are 95% of what people use now.
Final Checklist After Install
Run this in terminal:
|
0 1 2 3 4 5 6 7 |
sass --version # should show 1.97.x or higher sass --help # see all commands |
If you see version → you’re golden! 🎉
Now compile your first file:
|
0 1 2 3 4 5 6 |
sass style.scss style.css |
Or use watch mode.
Done!
Which option are you going to try first? Stuck on any step (especially PATH on Windows)? Want me to give a full folder structure + watch command for a small project next?
Just tell me — we’re building this together step-by-step 😊
