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.
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.