Gerillass: Shade Sass Function

Shade

Type: Function

shade();

Mixes a colour towards black by a percentage.

Name	Type	Description
`$color`	color	Accepts a colour.
`$percentage`	number (percentage)	Accepts a percentage.

A darker hover state derived from one brand colour.

Sass

$brand: crimson;
.button {
  background-color: $brand;
}
.button:hover {
  background-color: shade($brand, 20%);
}

CSS

.button {
  background-color: crimson;
}

.button:hover {
  background-color: #b01030;
}

Arguments are checked, so a wrong value stops the build with a message instead of quietly producing the wrong CSS.

Sass

$brand: crimson;
.button:hover {
  background-color: shade(brand, 20%);
}

Error: 'brand' is not a color value, please replace it with a valid one.