React Sass

Sass is a CSS pre-processor. It processes on the server-side and renders CSS to the browser.

Installation

Install Sass by using the command:

PS C:\Users\HP\react\react-project> npm install node-sass

Create a Sass file:

Create a Sass file, Sass files end in a .scss extension. In the Sass file define a variable to style <p> tags to green:

$myColor: green;
p {
    color: $myColor;
}

Import the file into App.jsx:

import './styles.scss'

We can add a few more styling to the page. The styles.css can now look like:

$myColor: green;
$margin: 0;
$transform: translate(50%, 50%)

p {
    color: $myColor;
    margin: $margin;
    transform: $transform;
}