Working.scss

                         // ? Main Sass File that is directly connected to html file is Working.scss file 
                        //  ! Syntax of creating sub sass files is-->  _name of sub file.scss 
              // TODO:: _variable.scss, _header.scss, _section.scss, _footer.scss are all sub part of working.scss in this case.
                        // * To call sub sass files, we use--> @import "./name of sub file"
@import "./variable";
@import "./header";
@import "./section";
@import "./footer";

               //  Extend property is not working at this moment, it's Synatax is--> @extend name-of-selector to be continued for working

.container
{
  margin: 20px 2%;
  
  .font
  {
    font-family: Bahianita;
    font-size: 2rem;
    margin: auto;
  }
  article
  {
    font-family: Dancing Script;
    line-height: 3;
    font-size: 1.5rem;
  }
}
                       // ? Nesting is allowed instead of applying descendent selector 
.a 
{
  .click
  {
    // ! For applying Pseudo-class, Syntax is --> &: pseudo-class{ --- }
    // TODO:: Similarly for pseudo-elements, Syntax is --> &:: pseudo-element{ --- }   
   
    &:hover {
      background-color: yellow;
    }
  }
}

.b
{
  .click
  {
    &:hover {
      background: rgb(187, 37, 187);
    }
  }
}

.c
{
  .click
  {
    background: rgb(4, 219, 76);
    padding: 2%;

    &:hover {
      background: lightblue;
    }
  }
}