What Sass used to be needed for, in native CSS
Variables, maths, nesting and a darker hover colour (color-mix()) all work natively. The &--danger line is the Sass habit that native CSS drops, which is why the flat .btn--danger rule below it is the one doing the work.
Build tools transform the CSS you write into the CSS browsers download: Sass adds variables, mixins and nesting before the browser sees it, PostCSS runs plugins such as Autoprefixer, Tailwind generates utility classes from your markup, and minifiers make the final file as small as possible.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Rewrite this Sass with native CSS only: $gap: 16px; .grid { gap: $gap; .item { padding: $gap / 2; } }.
Minify this by hand without changing its meaning: .box { margin: 0px 0px 0px 0px; color: #ff0000; /* red */ }.
Explain it without notes
What is a CSS preprocessor? Compare Sass variables with CSS custom properties.
What is PostCSS, and how is it different from Sass?
What does Autoprefixer do, and how does it decide what to add?
How does Tailwind keep its CSS small, and what is the main pitfall of that approach?
What happens to CSS between your editor and the browser in a typical production build?
Preview
Console
Nothing logged yet.Expected console output
default: rgb(79, 70, 229)
danger: rgb(220, 38, 38)
padding: 6px 12px