Sass, SCSS, Less

Sass i Less to preprocesory generujące CSS. SCSS jest jedną ze składni Sass, zbliżoną do zwykłego CSS.

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

Pomagają m.in. przez zmienne, mixiny i dzielenie kodu. Przeglądarka otrzymuje skompilowany CSS.

Doprecyzowanie: zmienna Sass jest obliczana podczas kompilacji. CSS custom property, np. var(--color), działa w przeglądarce i podlega kaskadzie.

Pułapka: głębokie zagnieżdżanie generuje trudne selektory. Nie potrzebuję preprocesora tylko po to, by mieć zmienne — CSS już je ma.