1.7.b — SCSS vs SASS Syntax & Setup

In one sentence: SCSS uses curly braces and semicolons (a strict superset of CSS), while the older SASS syntax uses indentation — SCSS is the industry default, and you set it up with Node.js + dart-sass in minutes.

Navigation: ← 1.7.a — What Is SASS? · 1.7.c — Variables & Nesting →

---

1. Two syntaxes, one language

	SCSS (.scss)	Indented SASS (.sass)
Braces	{ } required	None — indentation defines blocks
Semicolons	Required after declarations	None — newlines separate declarations
CSS compatible?	Yes — valid CSS is valid SCSS	No — different syntax entirely
Popularity	~95% of projects	Rare outside legacy codebases
File extension	.scss	.sass

Side-by-side comparison

// ── SCSS syntax (.scss) ──────────────────
$primary: #3b82f6;

.btn {
  background: $primary;
  padding: 0.5rem 1rem;

  &:hover {
    background: darken($primary, 10%);
  }
}

// ── Indented SASS syntax (.sass) ─────────
$primary: #3b82f6

.btn
  background: $primary
  padding: 0.5rem 1rem

  &:hover
    background: darken($primary, 10%)

Both compile to the same CSS. This course uses SCSS exclusively — it is what teams and frameworks expect.

---

2. Why SCSS won

1. Zero learning curve — any valid CSS file is already valid SCSS. Rename .css to .scss and it works.
2. Copy-paste friendly — code snippets from MDN, Stack Overflow, or CSS specs drop in without conversion.
3. Tooling — linters (Stylelint), formatters (Prettier), and frameworks (Bootstrap, Bulma) all use SCSS.
4. Team onboarding — new developers read SCSS immediately because it looks like CSS.

---

3. Setting up SCSS

Prerequisites

• Node.js (v16+) installed — check with node -v
• npm (comes with Node) — check with npm -v

Step 1 — Install dart-sass

npm init -y                     # create package.json if needed
npm install --save-dev sass     # installs dart-sass

Why not node-sass? node-sass wraps the deprecated C++ LibSass engine. sass on npm is Dart Sass — actively maintained, spec-compliant, and supports @use / @forward.

Step 2 — Add npm scripts

{
  "scripts": {
    "sass:build": "sass src/scss:dist/css --style=compressed",
    "sass:watch": "sass src/scss:dist/css --watch"
  }
}

Script	What it does
sass:build	Compile once, minified output
sass:watch	Recompile automatically on file save

Step 3 — Run

npm run sass:watch

Every time you save a .scss file in src/scss/, the compiler writes a .css file to dist/css/.

---

4. VS Code extensions

Extension	Purpose
SCSS IntelliSense	Autocomplete for variables, mixins, functions
Live Sass Compiler	One-click compile without npm scripts (good for learning)
Stylelint	Lint SCSS for errors, conventions, and order

For real projects, prefer npm scripts over Live Sass Compiler — it gives you reproducible builds in CI/CD.

---

5. Recommended folder structure

project/
├── src/
│   └── scss/
│       ├── abstracts/          ← variables, mixins, functions
│       │   ├── _variables.scss
│       │   └── _mixins.scss
│       ├── base/               ← resets, typography, global styles
│       │   ├── _reset.scss
│       │   └── _typography.scss
│       ├── components/         ← buttons, cards, modals
│       │   ├── _buttons.scss
│       │   └── _cards.scss
│       ├── layout/             ← header, footer, grid, sidebar
│       │   ├── _header.scss
│       │   └── _grid.scss
│       ├── pages/              ← page-specific styles
│       │   └── _home.scss
│       └── main.scss           ← single entry point (@use all partials)
├── dist/
│   └── css/
│       └── main.css            ← compiled output
└── package.json

This is a simplified 7-1 pattern — covered in depth in 1.7.d.

---

6. Source maps

By default, dart-sass generates a .map file alongside the CSS:

dist/css/main.css
dist/css/main.css.map

In DevTools, instead of seeing main.css:142, you see _buttons.scss:23 — the original SCSS line. This makes debugging painless. Disable maps in production if you prefer: --no-source-map.

---

7. Key takeaways

1. SCSS (curly braces) is a CSS superset — the standard syntax for modern SASS work.
2. Indented SASS uses whitespace instead of braces — rarely used in new projects.
3. Install with npm install --save-dev sass — this is Dart Sass, the only supported compiler.
4. Use --watch during development for instant recompilation on save.
5. Organize files into folders (abstracts, base, components, layout, pages) from the start.
6. Source maps link compiled CSS back to your SCSS files in DevTools.

---

Explain-It Challenge

Explain without notes:

1. Why is any valid CSS file also valid SCSS, but not valid indented SASS?
2. What is the difference between sass (npm) and node-sass — which should you install and why?
3. How do source maps help during development?

---

Navigation: ← 1.7.a — What Is SASS? · 1.7.c — Variables & Nesting →