How to learn sass css?
Learn sass with vscode:
If you want
to learn sass then need to install vscode software. After then need to install
live sass compiler extension in the vs code. You can install as instruction
from the below screenshot:
You will found as below screen:
*{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>
how to use double class in scss?
.goalForm{
padding: 20px;
border: 1px solid #ccc;
box-shadow: 0 0 20px 0 #aaa;
max-width: 500px;
margin: 50px auto 20px;
border-radius: 10px;
&.invalid{
label{
color: #f00;
}
input{
border-color: #000;
background: #f00;
}
}
}
compiled css:
.goalForm.invalid label{
color: #f00;
}
.goalForm.invalid input{
border-color: #000;
background: #f00;
}
HTML code:
<form className="goalForm invalid">
<label className="form-label">Course Goal</label>
<input type="text" className="form-control" />
</form>
No comments:
Note: Only a member of this blog may post a comment.