SCSS lighten function

Revision history
Tags: sass css

SASS has a lighten function along with other color manipulation utilities (e.g. darken) which are really easy to use.


$primary: #ff0000;

body {
  background-color: lighten($primary, 30%);
  color: darken($primary, 20%);

Which compiles into the following

body {
  background-color: #ff9999;
  color: #990000;

It takes two arguments; color and amount.


If you have any comments or feedback, please send me an e-mail. (stig at stigok dotcom).

Did you find any typos, incorrect information, or have something to add? Then please propose a change to this post.

Creative Commons License This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.