A CSS pre-processor (like SASS/SCSS or LESS) extends plain CSS with features such as variables, nesting, mixins, and functions. These features make styles more maintainable and reusable, especially as a React app grows.

Why use a pre-processor in React?

React focuses on component-based UI, and pre-processors help keep styles organized and consistent across components.

Key benefits

• Variables → centralize colors, spacing, breakpoints
• Nesting → mirror component structure
• Mixins → reuse common patterns (buttons, flex utilities)
• Cleaner maintenance → fewer repeated rules

Typical setup in React

Most modern setups (Vite, CRA, Next.js) support SCSS out of the box.

npm install sass

Use it per component:

import "./Button.scss";

function Button() {
  return <button className="btn">Save</button>;
}

// Button.scss
$primary: #3b82f6;

.btn {
  background: $primary;
  color: white;

  &:hover {
    opacity: 0.9;
  }
}

Where CSS Pre-processors shine

✅ Migrating or maintaining legacy CSS ✅ Design-heavy apps with many custom styles ✅ Teams comfortable with traditional CSS workflows ✅ Complex animations or shared styling logic