Sass / SCSS

Sass (Syntactically Awesome Style Sheets) is a CSS preprocessor — a language that extends CSS with programming constructs and compiles down to plain CSS that browsers can read. SCSS (Sassy CSS) is its dominant syntax variant, using standard CSS brace/semicolon notation plus Sass features; the Natours project uses SCSS exclusively.

---

Why a Preprocessor?

Plain CSS has no variables, no functions, no imports that consolidate at build time, and no way to nest selectors. As stylesheets grow, they become hard to maintain. Sass solves this with:

Feature	Problem it solves
Variables ($color-primary)	Eliminates magic-value duplication across files
Nesting	Co-locates child rules with their parent context
Partials + @import	Splits one large stylesheet into organised topic files
Mixins (@mixin / @include)	Reusable rule blocks, optionally parameterised
Functions (@function)	Computed values (e.g. rem() conversion)
Operators	Arithmetic directly in style values
Placeholder selectors (%)	Shared rules without emitting extra classes

---

SCSS vs Indented Sass

	SCSS	Sass (indented)
Syntax	CSS-like, braces + semicolons	Python-like, whitespace-sensitive
File extension	.scss	.sass
Adoption	Near-universal	Legacy / niche preference

Natours uses .scss throughout.

---

Key Features in the Natours Project

Variables

Defined in sass/abstracts/_variables.scss. Design tokens for colours, typography, and grid dimensions:

$color-primary: #55c57a;
$default-font-size: 1.6rem;
$grid-width: 114rem;

Nesting

Selectors and pseudo-classes nested inside their parent block, reducing repetition and matching bem-methodology structure visually:

.navigation {
    &__nav { … }        // compiles to .navigation__nav
    &__item { … }       // compiles to .navigation__item
    &:hover { … }
}

Mixins with Arguments

The respond() mixin in _mixins.scss centralises all media query breakpoints:

@mixin respond($breakpoint) {
    @if $breakpoint == phone {
        @media only screen and (max-width: 37.5em) { @content };
    }
    // …
}
 
// Usage:
.card { @include respond(tab-port) { width: 100%; } }

Breakpoints use em units (not px) so they respect user-set browser font sizes.

Partials and the 7-1 Architecture

See css-architecture for the full 7-1 pattern. Each partial is prefixed with _ (e.g. _button.scss) to signal it should not compile standalone. sass/main.scss is the single entry point that @imports all partials in dependency order:

abstracts → base → components → layout → pages

---

Build Pipeline in Natours

node-sass main.scss → style.comp.css        # compile
concat icon-font.css + style.comp.css       # merge icon font
postcss --use autoprefixer → style.prefix.css  # vendor prefixes
node-sass --output-style compressed → style.css  # minify

This four-step pipeline (managed via npm-run-all) produces a single optimised style.css for production.

---

Tooling

Tool	Version in Natours	Role
node-sass	^4.5.3	Sass → CSS compilation
postcss-cli	^4.1.1	PostCSS runner
autoprefixer	^7.1.4	Adds -webkit-, -moz- vendor prefixes
concat	^1.0.3	Concatenates CSS files
npm-run-all	^4.1.1	Runs multiple npm scripts in parallel/sequence

---

See Also

• css-architecture — 7-1 folder pattern used in Natours
• bem-methodology — class naming convention paired with Sass nesting
• responsive-design — breakpoint system enabled by the respond() mixin
• css-animations — keyframe animations defined as Sass partials
• schmedtmann-2018-natours-advanced-css — source repo