Customize with Sass

Last reviewed Jun 1, 2026 Content v20260601

Track mode

iframe_html

Means

HTML preview sandbox

Reading

~1 min

Level

intermediate

This lesson

This lesson teaches Customize with Sass—the ideas, syntax, and habits you need before moving on in Foundation.

Foundation skills help when you inherit marketing sites built on Zurb’s grid system.

You will apply Customize with Sass in contexts like: Large marketing sites, email-adjacent layouts, and legacy responsive redesigns.

Read the lesson, edit HTML/CSS in the playground, press Run to preview, then answer the lesson MCQs.

Toward the end of the track—use it to consolidate patterns before the capstone or summary lessons.

CDN playgrounds ship the compiled Foundation CSS. Production teams install foundation-sites via npm, import Sass partials, and override settings variables before components compile—primary palette, global width, border radius, and font stacks.

Settings vs overrides

Sass settings — change $primary-color, $global-width, etc. in _settings.scss
Runtime CSS — quick experiments via custom properties or scoped overrides (fine for prototypes, brittle at scale)

Laravel and Vite pipelines typically compile one app.scss entry that imports Foundation settings, then utilities and components you actually use.

Self-check

Why override Sass variables before importing components?
What is the risk of editing foundation.min.css in node_modules?
Name one token you would brand first.

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

First Sass variable?
CDN limits when?

No discussion yet. Be the first to ask a question.