SCSS stands for Sassy Cascading Style Sheets or Sassy CSS. It is a superset of the CSS language. It is also used as a file extension for SASS(syntactically awesome style sheets). SCSS Code are executed on the server and sends CSS to the browser. In SCSS, we can create dynamic css using the variable, conditions, looping etc. In this tutorial we will learn how to use SCSS in react.
Install SASS in React
npm i sass
Create a Sass file
Sass files have the file extension .scss. And Now import your .scss file in your react component.
Using the variables in SCSS
.circle {
$size: 100px;
width: $size;
height: $size;
border-radius: $size * 0.5;
}
The above code will compile to
.circle {
width: 100px;
height: 100px;
border-radius: 50px;
}
Applying Conditions in SCSS
$width:auto;
p{
@mixin clearfix($width) {
@if $width == 'auto' {
// if width is not passed, or empty do this
} @else {
display: inline-block;
width: $width;
}
}
}
The above code will apply css if width is auto else it will apply css of else condition.
Dynamic Class in SCSS
$columns: 5;
@for $i from 1 through $columns {
.columns-#{$i} {
width: (100% / $i);
}
}
The above code will compile to
.columns-1 {
width: 100%;
}
.columns-2 {
width: 50%;
}
.columns-3 {
width: 33.33333%;
}
.columns-4 {
width: 25%;
}
.columns-5 {
width: 20%;
}
Each loop in SCSS
The code below will loop through key value pair in $icons.
$icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f");
@each $name, $glyph in $icons {
.icon-#{$name}:before {
display: inline-block;
font-family: "Icon Font";
content: $glyph;
}
}
The code below will loop through the lists $icons
$icons:
"eye" "\f112" 12px,
"start" "\f12e" 16px,
"stop" "\f12f" 10px;
@each $name, $glyph, $size in $icons {
.icon-#{$name}:before {
display: inline-block;
font-family: "Icon Font";
content: $glyph;
font-size: $size;
}
}
More about SASS and SCSS syntax you can read here.
Recommendation
How to validate form in ReactJS
How to create charts in ReactJS
For more SCSS Tutorials Click here, Node.js Tutorials Click here.
If you like this, share this.