What are preprocessors ?

Preprocessors are tools that process code before it is compiled or interpreted by the browser or environment.

In the context of CSS:

A CSS preprocessor is a scripting language that extends CSS with features like:

• Variables
• Nesting
• Mixins
• Functions
• Inheritance

The preprocessor compiles this extended syntax into standard CSS that browsers can understand.

Common CSS Preprocessors:

• SASS/SCSS
• LESS
• Stylus

Example (with SCSS):

$primary: #3498db;

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

Compiled CSS:

button {
  background-color: #3498db;
}
button:hover {
  background-color: #2a80b9;
}

Benefit:

Preprocessors make CSS more modular, maintainable, and efficient, especially in large projects.