How to start work with SASS in reactjs?
How to
install sass in react?
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;
$bld: 700;
$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 {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; margin: $mar; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
background: #0b6;
color: #fff;
&:hover{
background: #0bf;
}
&:active{
background: #026082;
}
&::before {
position: absolute;
width: 9px;
height: 9px;
left: 0;
top: 8px;
content: '';
border-right: 2px solid #0bf;
border-top: 2px solid #0bf;
transform: rotate(45deg);
}
}
}
Now you will see your result as
below screenshot:
*{margin: 0;padding: 0; border: 0;box-sizing: border-box;}
body{font-family: Arial, Helvetica, sans-serif;}
a{color: #000;}
h1{font-size: 36px; margin-bottom: 10px;}
h2{font-size: 32px; margin-bottom: 10px;}
h3{font-size: 28px; margin-bottom: 10px;}
h4{font-size: 24px; margin-bottom: 10px;}
h5{font-size: 20px; margin-bottom: 10px;}
p{font-size: 16px; margin: 0 0 10px 0; line-height: 22px;}
ul{list-style: none;}
li{padding: 3px 0;}
.containerS{
max-width: 1170px;
margin: 0 auto;
}
.rowS{
display: flex;
margin-right: -15px;
margin-left: -15px;
}
.menuRightSect{text-align: right;}
[class*="colS"] {
padding-left: 15px;
padding-right: 15px;
}
.colS1{width: 8.33%;}
.colS2{width: 16.67%;}
.colS3{width: 25%;}
.colS4{width: 33.33%;}
.colS5{width: 41.67%;}
.colS6{width: 50%;}
.colS7{width: 58.33%;}
.colS8{width: 66.67%;}
.colS9{width: 75%;}
.colS10{width: 83.33%;}
.colS11{width: 91.67%;}
.colS12{width: 100%;}
.hideS{display: none;}
header{
box-shadow: 0 0 10px 0 #ccc;
padding: 20px 0;
}
.logo{
a{
font-size: 26px;
text-decoration: none;
color: #0bf;
}
}
.menuRightSect{
position: relative;
.menuHamBurger{
position: absolute;
right: 15px;
top: 0;
cursor: pointer;
span{ width: 30px; height: 3px; background: #ccc;
margin: 6px auto; display: block; border-radius: 5px;}
}
}
.welcomeSec{
padding: 40px 0;
}
.welRightSec{
.rightList {
padding: 20px 0px;
ul {
list-style: none;
margin: 0;
padding: 0;
li {
position: relative;
font-size: 18px;
padding: 3px 0 3px 20px;
a{
color: #222;
text-decoration: none;
&:hover{
color:#0bf;
}
}
&::before {
position: absolute;
width: 5px;
height: 5px;
background: #222;
left: 0;
top: 13px;
content: '';
}
}
}
}
.formControlS{
display: block;
width: 100%;
height: calc(2.25rem + 2px);
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: .25rem;
transition: border-color .15s ease-in-out,
box-shadow .15s ease-in-out;
&:focus{
box-shadow: none;
outline: none;
}
}
}
.recentSec{
background: #f5f5f5;
padding: 40px 0;
.proList {
padding: 0px;
ul {
list-style: none;
margin-left: -15px;
margin-right: -15px;
padding: 0;
li {
position: relative;
width: 192px;
display: inline-block;
margin: 15px;
transition: all 0.5s;
border: 1px solid #ccc;
padding: 0;
.view{
display: inline-block;
width: 100%;
a{
color: #fff;
text-decoration: none;
background: #239da1;
padding: 5px 15px;
transition: all 0.5s;
display: inline-block;
font-size: 16px;
&:hover{
background: #0f8286;
transition: all 0.5s;
}
&:active{
background: #064a4c;
transition: all 0.5s;
}
}
a:nth-of-type(1){
background: #45b6ba;
transition: all 0.5s;
&:hover{
background: #1c8f93;
transition: all 0.5s;
}
&:active{
background: #064a4c;
transition: all 0.5s;
}
}
a:nth-of-type(2){
float: right;
}
}
&:hover{
box-shadow: 0 0 20px 0 #919191;
transition: all 0.5s;
border: 1px solid #fff;
}
}
}
}
}
footer{
padding: 20px 5px;
border-top: 2px solid #239da1;
background: #f0f0f0;
margin-top: 20px;
.copyRight{
text-align: left;
a{
color: #666;
font-weight: 700;
text-decoration: none;
transition: all 0.5s;
&:hover{
color: #0bf;
transition: all 0.5s;
}
&:active{
color: #000;
transition: all 0.5s;
}
}
}
.socialFooter{
text-align: right;
ul{
margin: 0;
padding: 0;
list-style: none;
li{
display: inline-block;
font-size: 16px;
margin: 0 6px;
}
}
}
}
@media(max-width:767px){
.rowS{ display: block; margin-left: 0; margin-right: 0;}
[class*="colS"] {
width: 100%;
}
}
<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:
Note: Only a member of this blog may post a comment.