Book Image

Sass and Compass for Designers

By : Ben Frain
Book Image

Sass and Compass for Designers

By: Ben Frain

Overview of this book

Table of Contents (17 chapters)
Sass and Compass for Designers
Credits
Foreword
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

The adjust-color function


The adjust-color function allows manipulation of any color property. It's possible to adjust the red, green, and blue (properties that make up colors in RGB color space) or the hue, saturation, or lightness of a color (properties that make up colors in HSL color space). The alpha layer of a color can also be adjusted. It's not the simplest color function, but it does provide an amazing amount of granularity.

Each adjustable color property has a relevant keyword argument:

  • $red, $green, $blue: The values for red, green, and blue should be a number between 0 and 255

  • $hue: The hue value should be a plus or minus number for degrees on a color wheel between 0 and 359

  • $saturation, $lightness: Saturation and lightness should be a percentage as a plus or minus between 0 and 100

  • $alpha: A number between 0 and 1

That's a lot to take in, so let's consider some examples:

background-color: adjust-color($color1, $hue:40);

The preceding code takes the color and adjusts the hue property...