React Sass Styling
What is Sass
Sass is a CSS preprocessor.
Sass files execute on the server and send CSS to the browser.
Learn more about Sass in our Sass Tutorial.
Can I use Sass?
If you use create-react-app, Sass may be quickly installed and used in your React projects.
Install Sass by typing the following command on your terminal:
npm i sass
You are now ready to integrate Sass files in your project!
Create a Sass file
Create a Sass file in the same manner you would a CSS file, but with the file extension.scss
In Sass files, you can use variables and other Sass functions:
my-sass.scss:
Create a variable to specify the color of the text:
Example:
$myColor: red;
h1 {
color: $myColor;
}
Import the Sass file in the same manner you would import a CSS file:
Example:
index.js:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './my-sass.scss';
const Header = () => {
return (
<>
<h1>Hello Style!</h1>
<p>Add a little style!.</p>
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);
