Implementing Variable in CSS using Sass in React JS

Introduction

React is the most popular JavaScript framework at present. According to Wappalyzer, React has a 34.1% market share among JavaScript frameworks technologies. It has an easy learning path and you can learn it after JavaScript.

Sass in the extension of CSS with more powerful. Using Sass, you can implement variables, functions, nesting, and other awesome features.

This is the first part in the series "Awesome stylesheet with Sass". We have many other posts in the pipeline such as dark/light themes, loading skeleton, and other using Sass. You can follow me on Twitter(@surajondev) to get notified of future posts earlier.

We are going to merge these two technologies by installing and using the Sass variable in ReactJS.

So let's get started.

Environment Setup

Prerequisite

We need to pre-installed the NodeJS. NodeJS is a runtime JavaScript. These will be beneficial for running the command to install React and Sass.

Download NodeJS from here: https://nodejs.org/en/download/

Installing React

After installing Nodejs on your machine, now you can install React. Run the below command to install React.

Command:

npm create-react-app react-sass

react-sass will be the name of your project. After downloading, delete all the unnecessary files and code.

Installing Sass

Now, it's time to install the superhero of our project i.e, Sass. Make sure you are in the react-sass directory and run the below command.

Command:

npm install sass

After successful installation, you will be able to see the sass under dependencies properties in package.json.

Using Sass variable

Create a stylesheet file with the name style.scss. SCSS stands for Syntactically Awesome Style Sheet and is the superset of CSS. Sass uses this file extension for its implementation.

For variable declaration, you just need to prefix the name of the variable with $ and then the name of the variable.

$primary-color: #2C372A

Use this variable anywhere in the file with the name $primary-color

Together it will look like this:

$primary-color:#33D199;

.App {
  font-family: sans-serif;
  text-align: center;
  background-color: $primary-color;
}

Use this stylesheet by importing the file in the component. You can do this by the import command.

import "./style.scss";

Demo

You can see the live working of the project in the codesandbox here:

Connect with Me

• Twitter
• LinkedIn

Conclusion

I hope, this article has helped you understand Sass and its feature along with the installation guide for your React Application. Follow me on Twitter(@surajondev) for future updates earlier.

Thanks for reading the blog post.