SCSS: getting started

Lesson 01 · 10 min

Nesting

SCSS is CSS plus nesting. The output is plain CSS anyway.

You write .card { .title { } } — the build expands it into .card .title. Browsers don't understand SCSS: you need Vite, the Sass CLI or similar. Nesting deeper than three levels and you can no longer tell which selector came out. It's not "the deeper, the cooler".

Card
AI

You can ask about this rule«Don't repeat the parent's name with nesting for nesting's sake»

  • The file extension is .scss. The old indented .sass is better not mixed into the same project.
  • A // comment in the source won't end up in the CSS. /* */ may.
  • Without a build it's just text. An "invalid property" error in the browser = the file wasn't compiled.
AI

You can ask about this point«Lesson summary»

Check

Lock it in before you move on

  1. 1. Does the browser run .scss by itself?

  2. 2. Why is deep nesting harmful?

  3. 3. The regular syntax with braces is

PracticeSolve the lesson tasksA few short tasks in the editor. Check your code right away and see where it goes wrong.Start practice