Sass is wonderful. Simple as that. Of all the tools I’ve come across as a web developer, none come close to the high amount usage that Sass gets in my workflow. Love for this preprocessor has grown so much over the years that it has helped influence the future standardization of CSS4. The idea that we are bringing parts of CSS up to the level that Sass lives is a sign of success for this toolset.
What parts of Sass you end up using the most is heavily dependent on the project at hand. That being said, there are definitely a handful of Sass techniques or functions I end up using over and over again. This will be a part of series of posts that spotlight some of my favorite aspects of Sass (and really preprocessors in general).
lighten() / darken()
Sass allows for changing colors through a number of pre-built functions. This helps develop with color theory in mind – A List Apart has a great article about working with color palettes on the web using Sass using a number of these color functions. The two functions I find myself using the most are lighten() and darken().
To use in Sass, you use the color value followed by a percentage. The percentage will either lighten or darken based on the percentage provided. An example:
color: darken(#fff, 20%);
background-color: lighten($bg-color, 15%); // $bg-color could be a variable you’ve made for the commonly used site background-color
This can be a big help of adding additional colors to your site without venturing away from your color palette. I use these two quite often.
A great use for these two functions is for showing state changes, like hover. I often used one of these to softly change the link or button element background color:
You can use the lighten and darken functions to build additional color variables for use in your project, something I’ve done on numerous projects:
Do you have any other uses for lighten() or darken()? How often do you end up using these two functions over other available Sass color functions? Let us know in the comments below.
