Skip to content
Learn Netverks

Lesson

Step 1/32 3% through track

intro

Introduction to Sass

Last reviewed May 28, 2026 Content v20260528
Track mode
client_sass
Means
In-browser Sass
Reading
~2 min
Level
beginner

This lesson

An orientation to this Sass lesson—scope, vocabulary, and what you will practice next.

You need a clear map of the Sass track so later lessons do not feel like isolated tricks.

You will apply Introduction to Sass in contexts like: Mature front-end codebases, design systems, and teams that compile SCSS in CI or locally.

Write SCSS, compile in the playground, inspect CSS output, and reinforce with lesson quizzes. Also open the interview prep blocks.

Start here at the beginning of the sass track before skipping ahead.

How this Sass track works

  • Beginner — variables, nesting, and simple mixins; compile SCSS in the playground.
  • Intermediate — functions, maps, modules (@use), and responsive patterns.
  • Advanced — architecture (7-1), design tokens, build pipelines, and interview prep.

Prerequisite: solid CSS (or HTML & CSS). Sass compiles to CSS — the browser only sees the output.

Install on your device (macOS, Linux, Windows)

Lessons run in your browser on this site—install a modern browser and optional editor for local projects.

macOS

  1. Use Safari (preinstalled) or install Google Chrome / Firefox.
  2. Optional editor: VS Code (brew install --cask visual-studio-code).
  3. Open DevTools with ⌥⌘I (Chrome/Edge) or ⌥⌘C (Safari Web Inspector).

Linux

  1. Install Chromium or Firefox: sudo apt update && sudo apt install -y chromium-browser firefox (Debian/Ubuntu; package names vary by distro).
  2. Fedora: sudo dnf install -y chromium firefox.
  3. Optional editor: VS Code from code.visualstudio.com or sudo snap install code --classic.

Windows

  1. Install Microsoft Edge or Chrome.
  2. Optional editor: VS Code (winget install Microsoft.VisualStudioCode).
  3. Open DevTools with F12 or Ctrl+Shift+I.

Verify: Open any lesson playground and click Run—output appears without installing a compiler.

Local SCSS compile: npm init -y && npm install -D sass then npx sass input.scss output.css.

Sass (Syntactically Awesome Style Sheets) extends CSS with variables, nesting, mixins, and modules—then compiles to plain CSS for the browser.

Playground

Edit SCSS, click Compile in browser (or wait for auto-compile). Compiled CSS appears below; the preview styles a demo-card component.

Interview prep

What is Sass?

Sass is a CSS preprocessor: you write SCSS/Sass syntax, a compiler emits standard CSS browsers understand.

SCSS vs indented Sass?

SCSS uses braces like CSS; indented syntax omits {} and ;. SCSS is the default in most projects today.

Interview tip Lesson completion confidence

Can you explain this lesson in 30 seconds without reading notes?

Not saved yet.

Playground

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

Check yourself

Multiple choice — immediate feedback.

Discussion

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

Starter discussion topics

  • What SCSS pattern would you use on a real component here?
  • What compile output surprised you?

Sign up or log in to post comments and sync lesson progress across devices.

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

Jump

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32