Sass / SCSS

What it does

Sass extends CSS with features that make it easier to write and maintain: variables, nested rules, mixins (reusable code blocks), and functions. SCSS is the modern syntax — it's just CSS with extras.

When to use it

Use this when you're comfortable with CSS and want more power and organization, especially for large projects.

Real example

You're building a multi-theme design system with nested component styles. Prompt: 'Use SCSS to define color tokens as $color-primary: #F55048. Create a .btn mixin with padding, border-radius, font-weight, and a &:hover nested block. Call @include btn inside .btn-primary and .btn-secondary with different background colors.'

Good to know

Less necessary now that CSS has native variables and nesting. Still widely used, especially in larger codebases.

Alternatives

Install

Use cases

Language

Category

CSS & styling