What are CSS preprocessors (SASS, LESS)?

Preprocessors extend CSS with variables, nesting, mixins, and functions, compiled into

plain CSS.

Example (SASS):

$main-color: #3498db;

.button {

background: $main-color;

&:hover { background: darken($main-color, 10%); }

Key Takeaway:

Preprocessors make CSS more modular, maintainable, and reusable.