React Sass

🎨 What is React Sass?

Sass is a CSS preprocessor that adds powerful features like variables, nesting, and mixins to your React applications. It makes styling more organized and maintainable with cleaner syntax.


// Import Sass file in React component
import './App.scss';

function App() {
  return <div className="container">Hello Sass!</div>;
}

Key Sass Features

📦

Variables

Store reusable values like colors and fonts

$primary-color: #3498db;
$font-size: 16px;

🪆

Nesting

Write CSS rules inside each other

.card {
  h2 { color: blue; }
}

🔧

Mixins

Reusable groups of CSS declarations

@mixin flex-center {
  display: flex;
}

📂

Partials

Split styles into multiple files

@import 'variables';
@import 'mixins';

🔹 Installing Sass in React

Sass integration in React projects requires installing the sass package. Once installed, you can use .scss or .sass files directly in your components for enhanced styling capabilities.

# Install Sass
npm install sass

# or with yarn
yarn add sass

Note: After installation, restart your development server to apply changes.

🔹 Using Variables

Sass variables help maintain consistent styling across your application. Define colors, fonts, and spacing once, then reuse them throughout your stylesheets for easy updates and better organization.

// styles.scss
$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-stack: 'Arial', sans-serif;

.button {
  background-color: $primary-color;
  font-family: $font-stack;
  padding: 10px 20px;
  
  &:hover {
    background-color: $secondary-color;
  }
}

// Button.jsx
import './styles.scss';

function Button() {
  return <button className="button">Click Me</button>;
}

🔹 Nesting Selectors

Nesting in Sass mirrors your HTML structure, making styles more readable and maintainable. Parent selectors can be referenced with ampersand, allowing you to write cleaner, more organized stylesheets with less repetition.

// Card.scss
.card {
  padding: 20px;
  border: 1px solid #ddd;
  
  .card-header {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
  }
  
  .card-body {
    color: #666;
    
    p {
      line-height: 1.6;
    }
  }
  
  &:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }
}

// Card.jsx
import './Card.scss';

function Card() {
  return (
    <div className="card">
      <div className="card-header">Title</div>
      <div className="card-body">
        <p>Content goes here</p>
      </div>
    </div>
  );
}

🔹 Using Mixins

Mixins are reusable blocks of styles that can accept parameters, similar to functions. They help eliminate repetitive code and make your stylesheets more maintainable by centralizing common styling patterns across components.

// mixins.scss
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin button-style($bg-color, $text-color) {
  background-color: $bg-color;
  color: $text-color;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

// Using mixins
.container {
  @include flex-center;
  height: 100vh;
}

.primary-btn {
  @include button-style(#3498db, white);
}

.danger-btn {
  @include button-style(#e74c3c, white);
}

🔹 Partials and Imports

Organize your Sass code by splitting it into smaller, focused files called partials. Partials start with an underscore and can be imported into main stylesheets, promoting better code organization and reusability.

// _variables.scss
$primary-color: #3498db;
$spacing: 16px;

// _mixins.scss
@mixin card-shadow {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

// main.scss
@import 'variables';
@import 'mixins';

.card {
  padding: $spacing;
  @include card-shadow;
  background: $primary-color;
}

🔹 Complete Example

Here's a practical example combining variables, nesting, and mixins in a React component:

// UserCard.scss
$card-bg: #ffffff;
$primary: #3498db;
$text-dark: #333;

@mixin card-hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

.user-card {
  background: $card-bg;
  padding: 20px;
  border-radius: 8px;
  transition: all 0.3s ease;
  
  &:hover {
    @include card-hover;
  }
  
  .avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid $primary;
  }
  
  .user-info {
    margin-top: 15px;
    
    h3 {
      color: $text-dark;
      margin: 0;
    }
    
    p {
      color: lighten($text-dark, 30%);
      font-size: 14px;
    }
  }
}

// UserCard.jsx
import './UserCard.scss';

function UserCard({ name, role, avatar }) {
  return (
    <div className="user-card">
      <img src={avatar} alt={name} className="avatar" />
      <div className="user-info">
        <h3>{name}</h3>
        <p>{role}</p>
      </div>
    </div>
  );
}

export default UserCard;