React Sass Styling

What is Sass

Sass is a CSS pre-processor that compiles Sass files on the server into CSS, which is then sent to the browser.

Can I use Sass?

If you’re using Create React App, you can easily integrate Sass into your React projects. Install Sass by running the following command in your terminal:

You’re now ready to include Sass files in your project!

Create a Sass file

Create a Sass file similarly to CSS files, but with the .scss extension. In Sass files, you can use variables and other Sass features.

Example

my-sass.scss:

Define a variable to specify the text color.

$myColor: red;

h1 {
  color: $myColor;
}

Import the Sass file in the same way 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 />);