How to use SCSS in React?

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 Query in MongoDB

Using MongoDB in Node.js

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.