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
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)