[SCSS] Use standard built-in SCSS Functions for Common Operations

We can use JavaScript for color and opacity variations, math, list and map logic or to see if something exists. SCSS includes functions for a wide range of common use cases for logic in our styles. In this lesson we look at some of the + useful color functions to improve development velocity, readability, and simpli FY the code. Be sure to checkout all the SCSS functions:http://sass-lang.com/documentation/sass/script/functions.html

$base: #24ea12, $lighten _base:lighten ($base, 25%), $darken _base:darken ($base, 25%); $CLB: Complement ($base); $cllb : Complement ($lighten _base); $cldb: Complement ($darken _base); $light-color:scale_color ($base, $alpha:-50%); $ Dark-color:scale_color ($base, $saturation:-35%);. Base{Background-color:$base;Color:$CLB;}. Lighten_base{Background-color:$lighten _base;Color:$cllb;}. Darken_base{Background-color:$darken _base;Color:$cldb;}. Linear-gradient{Background-image:linear-gradient ($CLB, $CLLB, $cldb);Color:Mix ($base, yellow, 25%);}. Hover{Background-image:linear-gradient ($base, $lighten _base, $darken _base);Color:Mix ($base, yellow, 25%);&:Hover {color:transparentize (Mix ($base, yellow, 25%),. 5);//Based on given color, add 0.5 opacity}}.darken-color{Color:$dark-color;}. Lighten-color{Color:$light-color;}. Container{Display:Grid;Grid-gap:10px;Grid-template-columns:1fr 1fr 1fr;Counter-reset:Box;Height:100VH;}. Box:before{counter-increment:Box;font-size:3em;content:counter (box);}. Box{Display:Flex;justify-content:Center;align-content:Center;Align-items:Center;}

Github

[SCSS] Use standard built-in SCSS Functions for Common Operations