Previous Next

Styling React Using Sass

What is Sass

Sass is a pre-processor for CSS.

Sass files are applied to the server and send CSS to the browser.

Can I use Sass?

If you use a create-react-app for your project, you can easily install and use Sass for your React projects.

Install Sass using this command in your terminal:

Now you are ready to add Sass files to your project!

Create a Sass file

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

For Sass files you can use variables and other Sass functions:

my-sass.scss:

Create a variable to define the color of the text:

$myColor: red;

            h1 {
              color: $myColor;
            }

Import the Sass file in the same way as you import the CSS file:

index.js:

import React from 'react';
            import ReactDOM from 'react-dom';
            import './my-sass.scss';
            
            const Header = () => {
              return (
                <>
                  <h1>Hello Style!</h1>
                  <p>Add a little style!.</p>
                </>
              );
            }
            
ReactDOM.render(<Header />, document.getElementById('root'));
            
 
            

Previous Next