How to use Sass and SCSS with React projects

· Category: HTML & CSS

Short answer

Sass extends CSS with variables, nesting, mixins, and imports. SCSS syntax is fully CSS-compatible and widely used in React projects.

Steps

  1. Install sass as a dev dependency.
  2. Write .scss files and import them into components.
  3. Use variables and mixins for reusable design tokens.

Example

// _variables.scss
$primary: #3498db;

// Button.scss
@import 'variables';

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

Tips

  • Use CSS Modules alongside Sass for scoped component styles.
  • Prefer @use over @import in modern Sass for better encapsulation.
  • Avoid deep nesting; it increases specificity and output size.