iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up
« Previous

Sass HOME

Welcome to the iwantcoding.com Sass Tutorial. Sass is CSS with superpowers: variables, nesting, mixins, functions, and a module system — all compiled down to plain CSS that any browser can ship.

What this tutorial covers

ChapterYou will learn
Sass BasicsInstall, .scss vs .sass, variables, nesting, partials, @use, mixins, functions, @extend.
Logic & LoopsOperators, @if, @for, @each, @while, lists, maps, built-in modules.
PatternsBreakpoint mixins, theming, BEM, colour functions, math, design tokens.
ExamplesCheatsheet, runnable snippets, quiz, exercises, bootcamp, certificate.

Who this is for

  • CSS authors who want DRY, organised stylesheets.
  • Design system builders — tokens, theming, and consistent breakpoints.
  • Teams on legacy CSS — Sass is the most painless way to bring modern structure back.
How to use this tutorial: read the chapter, run the example with Try it Yourself », do the exercise, then take the quiz at the bottom. Hit Mark complete when you're done — the sidebar will track your progress.

Example

Example
$brand: #04AA6D;
body { color: $brand; }
Try it Yourself »

Discussion

Loading…

« Previous