Sass, SCSS, Less

Sass and Less are preprocessors that generate CSS. SCSS is one of the Sass syntaxes, close to plain CSS.

$gap: 16px;
.card {
  padding: $gap;
  &:hover { border-color: blue; }
}

They help with variables, mixins and splitting code, among other things. The browser receives compiled CSS.

To be precise: a Sass variable is resolved at compile time. A CSS custom property, e.g. var(--color), works in the browser and takes part in the cascade.

Pitfall: deep nesting produces hard-to-manage selectors. I don't need a preprocessor just to have variables — CSS already has them.