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.
