Scribd
Upload
7 views

Use SASS in React js

Uploaded by

jocelynnsa
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
7 views

Use SASS in React js

Uploaded by

jocelynnsa
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

Use SASS in React js

Manish Mandal
·
Follow
·

152

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.

You might also like