React Sass

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:

npm install sass

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:

Example

$myColor: red;

h1 {
  color: $myColor;
}

Import the Sass file

Import the Sass file in your React component:

Example

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:

Example

@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:

Example

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.

Note: Sass files are compiled to CSS at build time.