Category · Basics
CSS that is built from nested files
Nesting, build-time variables, mixins, why not extend, @use modules, &, loops, and how it all reaches the browser. Eight lessons after plain CSS.
8 lessons84 min
To the first lessonCheatsheet nowTopics, each as its own lesson
01NestingDemoSCSS is CSS plus nesting. The output is plain CSS anyway.
10 min
02$variables$ink: #111 — before the build. It isn't var(--ink): in the browser the value is already substituted.
10 min
03@mixin and @includeA chunk of properties with parameters. Not a copy-pasted flex center in ten places.
11 min
04Use @extend with careIt groups selectors. It's easy to merge things you didn't mean to. For a button, a mixin or a class in HTML is more common.
10 min
05Files: @use, not a mess in one file_buttons.scss isn't compiled on its own. The main file includes the pieces.
11 min
06The parent && is the selector you're writing inside. .btn { &:hover } → .btn:hover.
10 min
07@each and @ifGenerate utilities like .mt-1… instead of writing them by hand. Don't write a whole program in Sass.
11 min
08The build and why SCSSWithout a build step the browser gets nothing. Vite/sass compiles it to CSS. Don't mix three preprocessors.
11 min0/8 topics open. This is the course intro, not the whole course on one page.