Color functions
Sass comes with some built-in color functions. You can use these functions to create and manipulate CSS color values. You can also use these functions in your designs to generate color schemes dynamically based on a single input color.
Getting ready
The example code of this recipe will be compiled into CSS code using Ruby Sass. You can learn how to install Ruby Sass in the Installing Sass for command line usage recipe of Chapter 1, Getting Started with Sass. You can also easily test the color functions in the Sass interactive mode. Read the Using Sass interactive mode and SassScript recipe of Chapter 1, Getting Started with Sass, to learn more about using the interactive mode of Sass. For those who are not familiar with the different color models supported by CSS, it's highly recommended to study the CSS Color Module Level 3 first.
How to do it...
The following are the steps to implement color functions:
- Create a Sass template called
main.scss
, which will contain the SCSS...