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:
..........................................................................

*{margin0;padding0border0;box-sizingborder-box;}
body{font-familyArialHelveticasans-serif;}
a{color#000;}
h1{font-size36pxmargin-bottom10px;}
h2{font-size32pxmargin-bottom10px;}
h3{font-size28pxmargin-bottom10px;}
h4{font-size24pxmargin-bottom10px;}
h5{font-size20pxmargin-bottom10px;}
p{font-size16pxmargin0 0 10px 0line-height22px;}
ul{list-stylenone;}
li{padding3px 0;}
.containerS{
    max-width1170px;
    margin0 auto;
}
.rowS{
    displayflex;
    margin-right-15px;
    margin-left-15px;
}
.menuRightSect{text-alignright;}
[class*="colS"] {
    padding-left15px;
    padding-right15px;
  }
.colS1{width8.33%;}
.colS2{width16.67%;}
.colS3{width25%;}
.colS4{width33.33%;}
.colS5{width41.67%;}
.colS6{width50%;}
.colS7{width58.33%;}
.colS8{width66.67%;}
.colS9{width75%;}
.colS10{width83.33%;}
.colS11{width91.67%;}
.colS12{width100%;}
.hideS{displaynone;}
header{
    box-shadow0 0 10px 0 #ccc;
    padding20px 0;
}
.logo{
    a{
        font-size26px;
        text-decorationnone;
        color#0bf;
    }
}

.menuRightSect{
    positionrelative;
    .menuHamBurger{
        positionabsolute;
        right15px;
        top0;
        cursorpointer;
        spanwidth30pxheight3pxbackground#ccc
margin6px autodisplayblockborder-radius5px;}
    }
}
.welcomeSec{
    padding40px 0;
}
.welRightSec{
    .rightList {
        padding20px 0px;
        ul {
            list-stylenone;
            margin0;
            padding0;
            li {
                positionrelative;
                font-size18px;
                padding3px 0 3px 20px;
                a
                    color#222
                    text-decorationnone;
                    &:hover{
                        color:#0bf;
                    }
                }
                &::before {
                    positionabsolute;
                    width5px;
                    height5px;
                    background#222;
                    left0;
                    top13px;
                    content'';
                }
            }
            
        }
    }
    .formControlS{
        displayblock;
        width100%;
        height: calc(2.25rem + 2px);
        padding.375rem .75rem;
        font-size1rem;
        line-height1.5;
        color#495057;
        background-color#fff;
        background-clippadding-box;
        border1px solid #ced4da;
        border-radius.25rem;
        transitionborder-color .15s ease-in-out,
box-shadow .15s ease-in-out;
        &:focus{
            box-shadownone;
            outlinenone;
        }
    }

}
.recentSec
    background#f5f5f5;
    padding40px 0;
    .proList {
        padding0px;
        ul {
            list-stylenone;
            margin-left-15px;
            margin-right-15px;
            padding0;
            li {
                positionrelative;
                width192px;
                displayinline-block;
                margin15px;
                transitionall 0.5s;
                border1px solid #ccc;
                padding0;
                .view{
                    displayinline-block;
                    width100%;
                    a
                        color#fff
                        text-decorationnone;
                        background#239da1;
                        padding5px 15px;
                        transitionall 0.5s;
                        displayinline-block;
                        font-size16px;
                        &:hover{
                            background#0f8286;
                            transitionall 0.5s;
                        }
                        &:active{
                            background#064a4c;
                            transitionall 0.5s;
                        }
                    }
                    a:nth-of-type(1){ 
                        background#45b6ba;
                        transitionall 0.5s;
                        &:hover{
                            background#1c8f93;
                            transitionall 0.5s;
                        }
                        &:active{
                            background#064a4c;
                            transitionall 0.5s;
                        }
                    }
                    a:nth-of-type(2){ 
                        floatright;                        
                    }
                }
                &:hover{
                    box-shadow0 0 20px 0 #919191;
                    transitionall 0.5s;
                    border1px solid #fff;
                }
            }
            
        }
    }
}
footer{
    padding20px 5px;
    border-top2px solid #239da1;
    background#f0f0f0;
    margin-top20px;
    .copyRight
        text-alignleft;
        a
            color#666;
            font-weight700;
            text-decorationnone;
            transitionall 0.5s;
            &:hover{
                color#0bf;
                transitionall 0.5s;
            }
            &:active{
                color#000;
                transitionall 0.5s;
            }
        }
    }
    .socialFooter{
        text-alignright;
        ul{
            margin0;
            padding0;
            list-stylenone;
            li{
                displayinline-block;
                font-size16px;
                margin0 6px;
            }
        }

    }

}
@media(max-width:767px){
    .rowSdisplayblockmargin-left0margin-right0;}
    [class*="colS"] {
        width100%;
      }
}

<section className="recentSec">
        <div className="containerS">
          <div className="rowS">
            <div className="welcomeSection colS9">
              <h2>Recent Designs</h2>
              <div className="proList">
                <ul>
                  <li>
                    <div className="prImg">
<a href="#"><img src={image} alt="Product img" /></a>
                    </div>
                    <div className="view"><a href="view.html">View</a>
                      <a href="download.html">Download</a>
                    </div>
                  </li>
                  <li>
                    <div className="prImg">
<a href="#"><img src={image} alt="Product img" /></a></div>
                    <div className="view"><a href="#">View</a>
                      <a href="#">Download</a>
                    </div>
                  </li>
                  <li>
                    <div className="prImg">
<a href="#"><img src={image} alt="Product img" /></a></div>
                    <div className="view"><a href="#">View</a>
                      <a href="#">Download</a>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
            <div className="welRightSec colS3">
              <div className="search">
<input type="search" placeholder="Search" className="formControlS" /></div>
              <div className="rightList">
                <ul>
                  <li><a href="banner-design.html">Banner Design</a></li>
                  <li><a href="#">Menu Design</a></li>
                  <li><a href="#">Visiting Card</a></li>
                  <li><a href="#">Visiting Card</a></li>
                  <li><a href="#">Visiting Card</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </section>

No comments:

Copyright Reserved to Anything Learn. Powered by Blogger.