React Sass Styling

What is Sass?

Sass is a CSS pre-processor.

Sass files are executed on the server and sends CSS to the browser.

Sass adds extra features to CSS like variables, nesting, mixins, and more.

You can learn more about Sass in our Sass Tutorial.

Adding Sass to React

To add Sass to a React project, you need to install the Sass package:

Install the package using npm:

Now you are ready to include Sass files in your project!

Create a Sass file

Create a Sass file the same way as you create CSS files, but Sass files have the file extension .scss:

$myColor: red;

h1 {
  color: $myColor;
}

Import the Sass file

Import the Sass file in your React component:

import { createRoot } from 'react-dom/client';
import './MyStyle.scss';

function MyHeader() {
  return (
    <h1>My Header</h1>
  );
}

createRoot(document.getElementById('root')).render(
  <MyHeader />
);

You can learn more about Sass in our Sass Tutorial.

Sass Modules

Sass has many Built-in Modules that you can use to manipulate colors, math, strings, etc.

One example is the sass:color module.

It has a function to make a color darker or lighter, just by giving it a percentage:

@use 'sass:color';
$myColor: red;

h1 {
  color: $myColor;
}

h2 {
  color: color.adjust($myColor, $lightness: -20%);
}

h3 {
  color: color.adjust($myColor, $lightness: 20%);
}

Let us add the headers to our component:

import { createRoot } from 'react-dom/client';
import './MyStyle.scss';

function MyHeader() {
  return (
    <div>
      <h1>My Header 1</h1>
      <h2>My Header 2</h2>
      <h3>My Header 3</h3>
    </div>
  );
}

createRoot(document.getElementById('root')).render(
  <MyHeader />
);

You can learn more about Sass in our Sass Tutorial.