Skip to content
Learn Netverks

Track

sass

Sass

SCSS variables, mixins, modules, and architecture — compile in the browser playground.

Mode
client_sass
Practice
client sass
Lessons
32 units

Before you start

Sass/SCSS as a CSS preprocessor: variables, nesting, mixins, modules, and scalable style architecture.

Large stylebases need reuse and consistency—preprocessing reduces duplication and encodes design tokens.

Mature front-end codebases, design systems, and teams that compile SCSS in CI or locally.

Browser-side SCSS compile in the playground, skill-level progression, challenges, and interview blocks.

After solid CSS fundamentals—when raw CSS files start to feel repetitive or hard to refactor.

Lesson order

Sequential — follow top to bottom

32 lessons are live in this track. Start from step 01 for the smoothest path.

  1. 01 intro Introduction to Sass

    beginner

    Open →
  2. 02 what-is-sass What is Sass?

    beginner

    Open →
  3. 03 sass-vs-css Sass vs plain CSS

    beginner

    Open →
  4. 04 setup-tooling Setup and tooling

    beginner

    Open →
  5. 05 variables Variables

    beginner

    Open →
  6. 06 nesting Nesting

    beginner

    Open →
  7. 07 parent-selector Parent selector &

    beginner

    Open →
  8. 08 mixins-intro Mixins introduction

    beginner

    Open →
  9. 09 extend-intro @extend basics

    beginner

    Open →
  10. 10 comments Comments

    beginner

    Open →
  11. 11 mixins-params Mixins with parameters

    intermediate

    Open →
  12. 12 functions Functions

    intermediate

    Open →
  13. 13 operators Operators

    intermediate

    Open →
  14. 14 interpolation Interpolation #{}

    intermediate

    Open →
  15. 15 placeholders Placeholder selectors %

    intermediate

    Open →
  16. 16 control-directives @if, @for, @each

    intermediate

    Open →
  17. 17 modules-use @use and namespaces

    intermediate

    Open →
  18. 18 forward-as @forward

    intermediate

    Open →
  19. 19 maps Maps

    intermediate

    Open →
  20. 20 lists Lists

    intermediate

    Open →
  21. 21 media-queries Media queries in Sass

    intermediate

    Open →
  22. 22 breakpoint-mixin Breakpoint mixins

    intermediate

    Open →
  23. 23 fluid-type Fluid typography

    intermediate

    Open →
  24. 24 responsive-grid Responsive layout helpers

    intermediate

    Open →
  25. 25 partials-import-legacy Partials and @import (legacy)

    intermediate

    Open →
  26. 26 architecture-7-1 7-1 pattern

    advanced

    Open →
  27. 27 bem-with-sass BEM with Sass

    intermediate

    Open →
  28. 28 design-tokens Design tokens

    advanced

    Open →
  29. 29 project-theme Project: theme bundle

    advanced

    Open →
  30. 30 interview-essentials Sass interview essentials

    advanced

    Open →
  31. 31 production-build Production build habits

    advanced

    Open →
  32. 32 summary Track summary

    beginner

    Open →