HuntExams Academy
HTML/CSSIntermediate#css#sass#preprocessors

What are CSS preprocessors and what problems do they solve?

Preprocessors like Sass/SCSS and LESS extend CSS with variables, nesting, mixins, functions, and partials/imports that compile down to plain CSS. They reduce repetition and improve maintainability, though native CSS variables and nesting have closed some of the gap.

Example
// SCSS
$primary: #2563eb;
@mixin flex-center { display: flex; justify-content: center; align-items: center; }
.button {
  background: $primary;
  &:hover { background: darken($primary, 10%); }
  @include flex-center;
}

Related Questions

1
HTML/CSSAdvanced#css#sass

What is the difference between a Sass mixin and a placeholder/extend?

Open
2
HTML/CSSBeginner#css#tailwind

What is Tailwind CSS and how does it differ from writing custom CSS?

Open
3
HTML/CSSIntermediate#css#tailwind

How do you customize and extend Tailwind's default theme?

Open