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 sassNow 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
In the newly created .scss file, add some simple styling:
$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.