React Styling with Sass

🎨 React Styling with Sass (SCSS)

Sass (Syntactically Awesome Stylesheets) is a CSS preprocessor that allows features like:

✔ Variables
✔ Nesting
✔ Mixins
✔ Functions
✔ Modules

React supports Sass easily, especially with Create React App (CRA) or Vite.

🛠️ Step 1: Install Sass

Run in your React project:

🧩 Step 2: Create a `.scss` File

Example: styles.scss

$primary: #4caf50;
$textColor: #fff;

.container {
padding: 20px;
background: $primary;
color: $textColor;

button {
background: darken($primary, 10%);
padding: 10px;
border: none;
color: white;
cursor: pointer;

&:hover {
background: lighten($primary, 10%);
}
}
}

$primary: #4caf50;

$textColor: #fff;

.container {

padding: 20px;

background: $primary;

color: $textColor;

button {

background: darken($primary, 10%);

padding: 10px;

border: none;

color: white;

cursor: pointer;

&:hover {

background: lighten($primary, 10%);

}

🧪 Step 3: Import SCSS in React Component

⭐ Sass Features in React

1️⃣ Variables

2️⃣ Nesting

3️⃣ Mixins

Reusable CSS blocks.

4️⃣ Functions

5️⃣ Modules/File Splitting

You can organize Sass files:

Import using:

🔁 Sass Modules with React (Optional, Scoped Styling)

Instead of global .scss, use:

Example:

Use in component:

This prevents class name conflicts.

🆚 Sass vs Normal CSS in React

Feature	CSS	Sass
Variables	❌ No	✔ Yes
Nesting	❌	✔
Mixins	❌	✔
Modular Architecture	✔ (CSS Modules)	✔ Better
Reusability	Limited	Excellent

🎯 Summary

Key Point	Result
Install Sass	`npm install sass`
Use `.scss` files	Yes
Supports variables & mixins	✔
Supports CSS modules	✔

React Styling with Sass