Styling Your Applications With Sass In React

What Sass is all about.

Sass is a CSS pre-processor, and it files are executed on the server and sends CSS to the browser.

Now you might be wondering that can you use Sass in React you will find the best answer to that after this tutorial.

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

You can get Sass installed by running the command in your terminal "npm i sass". After that you're now ready to include Sass files in your project.

Now create a Sass file the same way as you create CSS files, but Sass files have the file extension .scss you can save the code sample below with the filename my-sass.scss

Code Sample:

$myColor: red;

h1 {
  color: $myColor;
}

Now, let's import the Sass file above inside our 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'));

That's how to use Sass in React. You can drop some comment or contact me through my social handles if you want me to write more tutorials on how to use Sass.