How to Configure and Set Up Sass CSS for your Future React projects
Tags: css, react
Published: 2023-02-07 16:51:26

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image_6891f54389218faafc8de522b25544c4.png" alt="An aerial view of someone typing on a laptop."/></figure>

## TL;DR

This article focuses on how to use and set up [Sass to CSS](https://sass-lang.com/documentation/) for your React projects. If you’re interested in learning more about Sass CSS, this article is perfect for you.

## Introduction

[Syntactically Awesome Style Sheets](https://sass-lang.com/install) (SASS) is a popular CSS preprocessor. The program converts SASS to CSS code, which can be used to quickly style HTML elements. Sass CSS controls how elements look on a website.

Sass is compatible with all CSS versions, and it provides multiple developer-friendly features such as variables, nesting, imports, and more. In this article, we’ll explore some of the features of Sass, go over how to set it up, and get it up and running in a React application.

## Why Use Sass CSS?

Since stylesheets are growing in size, complexity, and maintenance difficulty, a CSS preprocessor can be helpful in more involved situations.

Sass enables you to use features that are not existing in CSS, such as variables, nested rules, mixins, imports, inheritance, built-in functions, and more.

### Advantages of Using Sass 

Next, let’s take a look at some of the attractive benefits of using Sass CSS:

- Sass CSS lets you write clean, easy, and simple CSS in a programming construct.
- It requires less code, allowing you to write CSS more quickly.
- It’s more stable and robust because it is an extension of CSS, which makes work easier and more efficient for developers and designers.
- It boasts compatibility with all versions of CSS. Therefore, using any available CSS libraries should be a seamless process.
- Sass CSS makes provisions for nesting so that you can use nested syntax and valuable functions like color manipulation, math functions, and other values.


## Creating Our React Project

To start this Sass CSS tutorial we need to create our React project, the first thing we need to do is head to the terminal and type in the following command:

```
npx create-react-app my-sass
```

If you don’t like `create-react-app`, [try out one of these alternatives.](https://code.pieces.app/blog/alternatives-to-create-react-app) The image below shows our simple React website, with our React environment files:

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image9_685e77b2af6a2cf324d920a231e93262.png" alt="A new React project in VS Code for Sass CSS."/></figure>

This is what it looks like in the browser:

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image4_cde8a141cceb067cd49b0505b1940037.png" alt="A webpage displaying &quot;Hey guys&quot;."/></figure>

### Folder Structure

Now, let’s take a quick look at our folder structure below at our React environment files:

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image8_46311971c73a12993a20828fd83c9d4f.png" alt="The project&#x27;s folder structure in VS Code for Sass CSS."/></figure>

We have a pretty simple folder structure here. However, running Sass CSS in a project takes a little bit of previous knowledge, especially when configuring it. However, to make the process run a lot smoother, we can install two different extensions for VS Code:

#### Extension 1

- [Sass Extension](https://marketplace.visualstudio.com/items?itemName=Syler.sass-indented)**:** Sass helps with auto-complete formatting and highlighting:


<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image12_16c2084cbbb04fefcc78ac2dd9ea6dbd.jpg" alt="The Sass Extension on the VS Code Marketplace that implements Sass CSS."/></figure>

#### Extension 2

- [Live Sass Compiler](https://marketplace.visualstudio.com/items?itemName=glenn2223.live-sass)**:** Live Sass Compiler is a VS Code extension that enables us to compile/transpile our SASS/SCSS files to CSS files in real-time with live browser reloads:


<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image3_503acd52eb22db9539affbaf5207a598.png" alt="Live Sass Compiler on the VS Code Marketplace from Sass to CSS."/></figure>

## Navbar

The first thing we’ll build in our demo React project is our Navbar. However, first, we need to create our `Component` folder in our `src`, and then create a file in our  `Component` folder named `Navbar.js`. In our `Navbar.js` file, we will edit our code to be like this:

```
import React from 'react'

function Navbar() {
 return (
 <div className="navbar">
 <a href="/home">Home</a>
 <a href="/about">About</a>
 <a href="/profile">Profile</a>
 <a href="/contact">Contact</a>
 </div>
   )
}

export default Navbar
```

The image below shows the result on the browser:

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image13_f6fa7b1e93f1a4121560011d40e3d10a.png" alt="A Navbar with some text on a plain white background."/></figure>

This is a simple UI for our Navbar, but how do we transform it and make it look better with Sass CSS? The first thing we want to do is create a styles folder.

## Creating our Styles Folder

In this section, we’ll create our styles folder to write our Sass code. The first step is to go to the `src` folder and create a `styles` folder that will hold the CSS and Sass of our application. Next, we create a file in our `styles` folder and name it `Navbar.scss`. In the `Navbar.scss` file, you can write regular CSS, as there are not many differences between the two. This is good because you can quickly transfer your CSS knowledge to your newly acquired Sass knowledge.

Now, in `Navbar.scss`, we can make the following changes:

```
.navbar{
  width:100%;
  height: 80px;
  background-color: grey;
}
```

Before checking to see if this code works in the browser, we should first `import '../Styles/Navbar.css';` into the `App.js` file, then click on “watch sass” located in the bottom right corner of our VS Code editor. This will then automatically generate these two files shown in the image below:

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image6_0e04c0e1d01a4d596105bbff511643cf.png" alt="Two files in the VS Code sidebar."/></figure>

This is because we’re using the Live Sass Compiler extension. When we check our demo project in the browser, we’ll see the image below as the result of our CSS:

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image1_780651bc9beb8f95d23ffbc356c3b1a0.png" alt="A grey Navbar in the browser."/></figure>

Although we can see the CSS grey color in our browser, we still have not done much with Sass yet.

## Sass CSS Variables

The great thing about Sass is that we can define variables, as seen in the code changes made in our `Navbar.scss` below:

```
$blackColor: rgb(24, 24, 24);
.navbar{
  width:100%;
  height: 80px;
  background-color: $blackColor;
}
```

Here, we first defined a variable called `BlackColor`, then set it equal to the `rgb` value `black`. So, instead of using the `rgb` value every time we want to render black, we can simply render the color like this:

```
background-color: $blackColor;
```

When we save this, it compiles, and we can see the changes in `Navbar.css` like this:

```
.navbar {
 width: 100%;
 height: 80px;
 background-color: rgb(24, 24, 24);
}/*# sourceMappingURL=Navbar.css.map */
```

This is what it should look like now in our browser:

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image7_b3dbd32f73f89b0d522fb9f7e9966003.png" alt="A black Navbar in the browser in Sass CSS."/></figure>

### Organize folder Structure for Sass variables

Now, one thing we can do to improve our folder and design structure is to create a separate file only for our variables. To do that, we’ll first create a folder in our `src` called `Variables`, then create a file in the `Variables` folder named `Variables.scss`, where we declare all of the different variables we’ll be using in our demo app.

The reason for this is that the whole point of declaring a variable is to be able to reuse that variable. For instance, if we want to use the black color in different Sass files, we can define it in the `Variables.scss`  file, and instead of directly defining the variable in our `Navbar.scss file`, we can simply make the following changes:

```
@import "../Variables/Variables.scss";

$blackColor: rgb(24, 24, 24);
.navbar{
  width:100%;
  height: 80px;
  background-color: $blackColor;
}
```

What we did above is import from the path to this file, which is `"../Variables/Variables.scss"`.  When we check the project on our browser, we’ll notice that everything works and the background color is still black.

Now, let’s style our Navbar a little bit more by making the following code changes in our `Variables.scss` and `Navbar.css` files:

```
//Variables.scss

$blackColor: rgb(26, 26, 26);
$whiteColor: rgb(232, 232, 232);

//Navbar.scss
@import "../Variables/Variables.scss";

$blackColor: rgb(24, 24, 24);
.navbar{
  width:100%;
  height: 80px;
  background-color: $blackColor;
}

.navbar a{
  color: $whiteColor;
  font-size: 25px;
  text-decoration: none;
}
```

The image below shows us the changes in the browser:

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image5_fd40f4bed92218203d0baf29baf9c42b.png" alt="A black Navbar with white text using Sass CSS."/></figure>

## Declaring a Font in Sass CSS

To declare a font, we have to make the following code changes to our `Variables.scss` and `Navbar.css` files:

```
//Variables.scss

///Colors
$blackColor: rgb(26, 26, 26);
$whiteColor: rgb(232, 232, 232);

///Fonts
$titleFont: Arial, Helvetica, sans-serif;
$bodyFont: 'Times New Roman', Times, Serif;

//Navbar.scss
@import "../Variables/Variables.scss";

.navbar{
   width:100%;
   height: 80px;
   background-color: $blackColor;
   display: flex;
   justify-content: center;
   align-items: center;
}

.navbar a{
   color: $whiteColor;
   font-size: 25px;
   text-decoration: none;
   font-family: $titleFont;
}
```

The image below shows the changes made to our project in the browser:

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image11_2ca43191bbb09461908bef53fb21cee6.png" alt="Centered white text on a black Navbar using Sass CSS."/></figure>

This image shows that our text moved to the center, and the font changed as a result of our Sass variable declared in the `Variables.scss` file.

Next, let’s make some more changes to this in our `Navbar.js` and `Navbar.scss` file:

```
//Navbar.js

import React from 'react'
import '../Styles/Navbar.css';

function Navbar() {
   return (
      <div className="navbar">
           <div className="links">
           <a href="/home">Home</a>
           <a href="/about">About</a>
           <a href="/profile">Profile</a>
           <a href="/contact">Contact</a>
           </div>
      </div>
   );
}

export default Navbar
```

Here, we created a `div`, then a `className` of `links`, and then made the following changes to our `Navbar.scss` file:

```
//Navbar.scss

@import "../Variables/Variables.scss";

.navbar{
  width:100%;
  height: 80px;
  background-color: $blackColor;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.navbar a{
  color: $whiteColor;
  font-size: 25px;
  text-decoration: none;
  font-family: $titleFont;
  margin: 10px;
}

.navbar .links {
  margin-right: 50px;
}

body {
  margin: 0%;
  padding: 0%;
}
```

In the image below, we see that we now have a beautiful Navbar:

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image10_ff4d3ab0c7e1cc284215df92fa5b09c9.png" alt="A properly configured Navbar with white text on a black background, aligned to the left of the page using Sass CSS.."/></figure>

Cool, right?

## Creating and Styling our Main Page in Sass CSS

To create our main page, the first thing we’ll want to do is create another component file in our `Component` folder, named `MainPage.js`. Let’s make the following changes in our newly created component file:

```
import React from 'react'

function MainPage() {
 return (
     <div className="mainPage">
         <h1>Welcome to Pieces!</h1>
     </div>
   );
}

export default MainPage;
```

We can see the result in the image below:

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image15_d364bbc7f41c7ff63f42b05e110875ff.png" alt="The same Navbar as before, with &quot;Welcome to Pieces!&quot; on the page below the Navbar."/></figure>

There’s one thing that’s important to understand in Sass: If we want to access or edit our `H1` tag for example, we can create another styles file called `MainPage.scss`, and make the following changes:

```
@import "../Variables/Variables.scss";

.MainPage{
 display: flex;
 justify-content: center;
 align-items: center;
}

h1 {
 color: $redColor;
}
```

In our `Variables.scss` file, we can add these changes:

```
$blackColor: rgb(26, 26, 26);
$whiteColor: rgb(232, 232, 232);
$redColor: rgb(175, 2, 2);
```

Here, we added `$redColor: rgb(175, 2, 2);`, which makes the text red. We can see the result in the image below:

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image14_598173aa9b61181f6c6f2bb7d7e2863d.png" alt="The same site as the previous image, except &quot;Welcome to Pieces!&quot; is now red."/></figure>

## Creating and Styling Our Button in Sass CSS

Next, we’re going to create a button and style it using Sass CSS. What we want to do is create a specific style for this button, and then reuse it many times throughout our demo application. To accomplish this, we’ll make the following changes to our `MainPage.scss` file:

```
@import "../Variables/Variables.scss";

.MainPage{
 display: flex;
 justify-content: center;
 align-items: center;
}

h1 {
 color: $redColor;
}

button {
 width: 200px;
 height: 40px;
 background-color: $redColor;
 border: none;
 border-radius: 8px;
 color: $whiteColor;
 font-size: 25px;
}
```

When we check the result on our browser, this is how our button looks:

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image2_c3d23832efdf6d5e7f359a1c9325255a.png" alt="The same web page with a new red button reading, &quot;Click Here&quot;. "/></figure>

Now, we want to use an essential syntax in Sass known as `@Mixin`, which serves as a function:

```
///Variables.scss

//Colors
$blackColor: rgb(26, 26, 26);
$whiteColor: rgb(232, 232, 232);
$redColor: rgb(175, 2, 2);

//Fonts
$titleFont: Arial, Helvetica, sans-serif;
$bodyFont: 'Times New Roman', Times, Serif;

@mixin buttonStyle {
  width: 200px;
  height: 40px;
  background-color: $redColor;
  border: none;
  border-radius: 8px;
  color: $whiteColor;
  font-size: 25px;
}
```

Here, we declared the name of a specific style called `buttonStyle` and passed in our button style. In our `MainPage.scss` file, the following changes were made:

```
//MainPage.scss

@import "../Variables/Variables.scss";

.MainPage{
  display: flex;
  justify-content: center;
  align-items: center;
}

h1 {
  color: $redColor;
}

 button {
   @include buttonStyle();
 }
```

In our button, we `@include` the `buttonStyle` mixin that we created. By checking the demo application in our browser, we can see that everything still works seamlessly.

## Conclusion

In this article, we looked at how we can configure and set up Sass for CSS in a React environment. We also looked at how we can create Sass variables, as well as how to use Sass mixin as a function. Check out the [source repository for this project on GitHub.](https://github.com/ChisomUma/Sass-Project)