Ads Top

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:

*{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>

how to use double class in scss?

.goalForm{
    padding20px;
    border1px solid #ccc;
    box-shadow0 0 20px 0 #aaa;
    max-width500px;
    margin50px auto 20px;
    border-radius10px;
    &.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:

Copyright Reserved to Anything Learn. Powered by Blogger.