Ads Top

How to start work with SASS in reactjs?


How to install sass in react?

You want to create a sass file then need  to install npm install node-sass

Also, can check screenshot for the folder structures:


Then go to any directory or the root file where available src folder and create a file as you wish: here is an example for the creating a sass file: my.scss

SASS file have extension .scss

It’s not required any compiler as the koala, preprocessor or any other.

Now you can write your sass code as below:
my.scss
$clrss#0bf;
$bld700;
$fntSize : 50px;
$padd : 40px;
$mar :0 10px;

.sassTest {
  color$clrss;
 font-size$fntSize;
}

@mixin bordRadi($radius) {
    -webkit-border-radius$radius;
    -moz-border-radius$radius;
      -ms-border-radius$radius;
          border-radius$radius;
  }
  .boxSS { 
      @include bordRadi(10px 30px 60px 100px);
     border:3px solid #ddd;
     padding$padd;
    }

nav.SS {
        ul {
            margin0;
            padding0;
            list-stylenone;
            }
        
        li { displayinline-blockmargin$mar; }
        
        a {
            displayblock;
            padding6px 12px;
            text-decorationnone;
            background#0b6;
            color#fff;
            &:hover{
                background#0bf;
            }
            &:active{
                background#026082;
            }
&::before {
    positionabsolute;
    width9px;
    height9px;
    left0;
    top8px;
    content'';
    border-right2px solid #0bf;
    border-top2px solid #0bf;
    transform: rotate(45deg);
}

        }
        
      }

Now you will see your result as below screenshot:

No comments:

Copyright Reserved to Anything Learn. Powered by Blogger.