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 lighten and darken functions


The first two Sass color functions we will use are lighten and darken. As you might imagine, these lighten and darken an existing color using HSL color manipulations. Let's use lighten to amend an existing value and property pair. We will change the following code:

background-color: #eee;

To the following:

background-color: lighten($color10, 93.5%);

Instead of declaring the color itself, we are telling Sass 'lighten the value provided by 93.5 percent'. In this instance, the value being passed to the lighten function is the variable $color10. While the syntax may seem verbose (as opposed to simply writing the hex, RGB, or HSL value), it makes authoring far faster as it's possible to make quick alterations to colors without needing to touch Photoshop, Fireworks, and the like.

The lighten and darken functions can be used on any color. As the amendments happen with an HSL-based manipulation, Sass is actually increasing (with lighten) or decreasing (with darken) the...