Color adjustments with compass

23 Jun 2013

When I fist started using css preprocessors like LESS and Sass, storing colors in variables was on of the first “oh-yeah this is how css should be” I had. Shortly after I learned about the lighten and darken functions where you set your source color, and give it a percentage value of how much lighter or darker you want it.

This is super handy when dealing with different states of <a> tag’s. Both :hover and :active having a lighter and darker color based upon one color source stored in a variable.

$colorLink: #3D97B8;

a:hover {
  color: lighten($colorLink, 20%); // #85C0D6
}

Get more control

While lighten and darken are great, they don’t output what you would expect in every situation. In those cases compass have two additional functions that adjust your colors relative to your base color. scale-lightness and scale-saturation, both takes a positive or negative value.

a:hover {
  // Lighten $colorLink 20 steps
  color: scale-lightness($colorLink, 20) // #60AECA
}

a:active {
  // Desaturates $colorLink 20 steps
  color: scale-saturation($colorLink, -20); 
}

Take full control

If you need full control, sass have scale_color function where you can mix several properites.

  • $saturation
  • $lightness
  • $alpha
  • $red
  • $green
  • $blue
a:hover {
  color: scale_color($colorLink, $saturation: -20%, $lightness: 20%) // #6AA9C0
}

References

comments powered by Disqus