[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 more useful color functions to improve development velocity, readability, and simplify 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