Use SASS in React js

In this tutorial, we will discuss Sass and how to use that in our React js project.

What is Sass?

Sass stands for Syntactically awesome style sheets is a CSS pre-processor that enables us to use variables, inline imports, nested rules, mixins, functions, and many more. It helps us to keep our stylesheet well organized.

Why Sass?

• We can use variables in our stylesheet

$main-color: #444
h2 {
color:$main-color
}
header{
background-color:$main-color
}

• We can use the mixin

@mixin default-type {  
  padding: 20px;  
  font-size: 16px;  
  font-weight:bold;
}
p {
 @include default-type;
}
article{
 @include default-type;
}

• The best part nested rules

header{
  background-color: #000;
    p{
      font-size:12px;
      font-weight: bold;
     }
}

• It helps us to keep our stylesheet well organized.

How to use in React js?

1. Create your React js project.

yarn create react-app sass-react-medium

2. Now install the node-sass module to your react project.

yarn add node-sass

3. In your project src directory create an app.scss file.

4. Now add the below code in your app.js file

5. Open your app.scss file and add below sass code there.

In the above code, I have given the example of all the main features of sass like how to use variable, mixin, function and interpolation. There are more things we can do with SASS. Please check their official documentation.

Here are the live code and GitHub repository for your reference.

Mediumtutorial/sass-react-medium