SASS - Syntactically Awesome Style Sheet

//Ways for : Installation for compiling Sass.

 > npm init -y
// Install the package.json file on directory 

 > npm install node-sass
//Install 'node-sass' as dependencies.

//Edit Package.json File.
"scripts": {
 "sass": "node-sass -w scss/ -o dist/css/ --recursive"
  }

> npm run sass
// To Run Sass, ( Just once is needed ) . IF adding any Partials, Need to run the command again.
// <------> Varia bles and Partials.
// Partials are Similar like components,We can store 'variables'(_variables) here, Which Can be re-used in different css stylesheets.
$colorRed : red;
body {
    background : $colorRed;
}


//Nesting and Structuring
// '&' Will refer to the Parent element which is class '.section'
.section  {
    h3 {
        font-size: 1.6rem;    
        color : black;
    }
    p {      }
    &-A {
        background-color: rgba(48, 245, 196, 0.329);
        padding : 10px 20px;
    }
    &-B {
        background-color: rgba(91, 194, 60, 0.329);
        padding : 0 20px;
    }
    &-C {
        background-color: rgba(98, 137, 245, 0.774);
        padding : 10px 20px;
    }
}

a {
    text-decoration: none;
    color : blue;
    &:hover {
        color : red;
        cursor: pointer;
    }
    &:active {
     color : goldenrod;
    }
}

//Inheritance & Contrast.
%btn-shared {
    text-decoration: none;
    color : blue;
    display: block;
    text-align: center;
}

a {
    @extend %btn-shared;
    //All the styling from 'btn-shared' Will be applied.
    &:hover {
        color : red;
        cursor: pointer;
    }
  
}

//Functions , Mixins.
 //It's Good idead to have functions and variables on a separate Partials ( separate File, Import to current file )
@function set-text-color($color){
    @if(lightness($color) > 50){
        @return #000;
    }@else {
        @return #fff;
    }
}
header {
 background-color: black;
 color : set-text-color(red);
 font-size: 2.0rem;
 line-height: 1.5;
}
    //Mixin
@mixin transformScss($propertyName){
    transform: $propertyName;
}

h1 {
    @include transformScss(rotate(20deg));
}