DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 968,873 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Implementing Variable in CSS using Sass in React JS
Suraj Vishwakarma
Suraj Vishwakarma

Posted on • Originally published at surajondev.com

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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

import "./style.scss";
Enter fullscreen mode Exit fullscreen mode

Demo

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

Connect with Me

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.

Top comments (0)

In defense of the modern web

I expect I'll annoy everyone with this post: the anti-JavaScript crusaders, justly aghast at how much of the stuff we slather onto modern websites; the people arguing the web is a broken platform for interactive applications anyway and we should start over;

React users; the old guard with their artisanal JS and hand authored HTML; and Tom MacWright, someone I've admired from afar since I first became aware of his work on Mapbox many years ago. But I guess that's the price of having opinions.