Use Sass as a practical layer on top of CSS to organize design tokens, control nesting and reuse recurring patterns with mixins, while still compiling to clean output the team can review.
Sass variables are a convenient way to centralize repeated values such as brand colors, radii and spacing scales.
In real projects, they often act as authoring tokens that feed components consistently before the final CSS is compiled.
A little nesting improves readability. Too much nesting creates selector traps.
Nesting works best when it mirrors a small component structure, such as a block, its element and one or two states.
If the compiled selector becomes hard to read or too specific, the nesting has gone too far.
A mixin bundles a repeated styling pattern so you do not have to copy the same cluster of declarations across components.
They are especially useful for recurring structures such as buttons, responsive breakpoints, focus rings or theme variants.