Sass In React | Styling | React Tutorial

Using Sass for styling React components

Sass is a powerful CSS preprocessor that allows you to write more maintainable and reusable styles. It includes features like variables, nested rules, and mixins, which make your CSS more powerful and easier to manage. This tutorial covers how to use Sass for styling React components.

Key Points:

Sass is a CSS preprocessor that extends CSS with features like variables, nested rules, and mixins.
Using Sass in React helps you write more maintainable and reusable styles.
Create React App has built-in support for Sass, making it easy to integrate.

Installing Sass

First, install Sass using npm or yarn:

npm install sass
# or
yarn add sass

Setting Up Sass in Create React App

Create React App has built-in support for Sass. To use Sass, rename your CSS files to .scss or .sass and import them as usual.

// Setting up Sass
/* App.scss */
$background-color: #f4f4f4;

.container {
    background-color: $background-color;
    padding: 20px;
}

/* App.js */
import React from 'react';
import './App.scss';

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

export default App;

Using Variables

Sass variables allow you to store values that you use throughout your stylesheet, making it easy to update styles consistently.

// Using variables in Sass
/* variables.scss */
$primary-color: #4CAF50;
$secondary-color: #f4f4f4;

/* App.scss */
@import './variables';

.container {
    background-color: $secondary-color;
    padding: 20px;

    h1 {
        color: $primary-color;
    }
}

/* App.js */
import React from 'react';
import './App.scss';

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

export default App;

Nesting

Sass allows you to nest your CSS selectors in a way that follows the same visual hierarchy of your HTML.

// Nesting in Sass
/* App.scss */
.container {
    background-color: #f4f4f4;
    padding: 20px;

    h1 {
        color: #333;

        span {
            color: #4CAF50;
        }
    }
}

/* App.js */
import React from 'react';
import './App.scss';

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

export default App;

Mixins

Mixins allow you to create reusable chunks of CSS that you can include in other selectors. This helps to keep your styles DRY (Don't Repeat Yourself).

// Using mixins in Sass
/* mixins.scss */
@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}

/* App.scss */
@import './mixins';

.container {
    background-color: #f4f4f4;
    padding: 20px;
    @include border-radius(4px);

    h1 {
        color: #333;
    }
}

/* App.js */
import React from 'react';
import './App.scss';

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

export default App;

Full Example

Here is a complete example of using Sass in a React application:

// App.js
import React from 'react';
import './App.scss';

function App() {
    return (
        <div className="container">
            <h1>Sass in React</h1>
            <button className="primary">Primary Button</button>
            <button className="secondary">Secondary Button</button>
        </div>
    );
}

export default App;

// App.scss
$primary-color: #4CAF50;
$secondary-color: #f4f4f4;
$button-padding: 15px 20px;

@mixin button-styles($bg-color, $color) {
    background-color: $bg-color;
    color: $color;
    padding: $button-padding;
    border: none;
    border-radius: 4px;
    cursor: pointer;

    &:hover {
        background-color: darken($bg-color, 10%);
    }
}

.container {
    background-color: $secondary-color;
    padding: 20px;

    h1 {
        color: #333;
    }

    .primary {
        @include button-styles($primary-color, white);
    }

    .secondary {
        @include button-styles($secondary-color, #333);
    }
}

Summary

In this tutorial, you learned how to use Sass for styling React components. Sass is a powerful CSS preprocessor that extends CSS with features like variables, nested rules, and mixins. You learned how to install Sass, set it up in Create React App, use variables, nesting, and mixins. Understanding Sass is essential for writing clean, maintainable, and scalable CSS in React applications.

React - Sass in React