React Sass Styling

React Sass Styling: SCSS Modules & Global Preprocessing

Sass (Syntactically Awesome Style Sheets) is a powerful CSS preprocessor that introduces variables, nested CSS rules, mixins, and inheritance to standard CSS stylesheets.

React applications built with Vite or Create-React-App support Sass styling out of the box once the sass compiler package is installed.

Installing Sass Preprocessor

To enable .scss / .sass file compilation in your project, install the sass compiler:

npm install -D sass

SCSS Modules Example (Card.module.scss)

Combining Sass nesting and variables with CSS Modules provides clean, scoped component styling.

// Variables
$primary-color: #4f46e5;
$border-radius: 12px;
$shadow-light: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

.cardContainer {
  background-color: #ffffff;
  border-radius: $border-radius;
  padding: 1.5rem;
  box-shadow: $shadow-light;
  transition: transform 0.2s ease-in-out;

  &:hover {
    transform: translateY(-4px);
  }

  .cardTitle {
    color: $primary-color;
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
  }

  .cardBody {
    color: #4b5563;
    line-height: 1.5;
  }
}

Consuming SCSS Modules in Component

import React from 'react';
import styles from './Card.module.scss';

export default function FeatureCard({ title, content }) {
  return (
    <div className={styles.cardContainer}>
      <h3 className={styles.cardTitle}>{title}</h3>
      <p className={styles.cardBody}>{content}</p>
    </div>
  );
}

Best Practices & Gotchas

• Name SCSS Files with .module.scss: To ensure style scoping, always append .module.scss to your component style file names. Simple .scss files operate in the global stylesheet scope.
• Do Not Over-Nest SCSS Selectors: Avoid nesting SCSS selectors more than 3 levels deep (.card .header .nav .item .link). Deep nesting produces bloated specificity and degrades browser CSS matching performance.

Self-Check Challenge

Write an SCSS mixin @mixin flex-center and include it inside a .module.scss class selector for centering elements horizontally and vertically.