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 rgba function


If you want to convert an existing color value (defined as either a variable or hex value) to an RGBA value (including an alpha layer for transparency), use the rgba function:

background-color: rgba(red,.9);  

This will produce following CSS:

background-color: rgba(255, 0, 0, 0.9);

The two arguments needed are the color and then the value of the alpha layer (0 is entirely transparent, 1 is entirely opaque, .5 is halfway between the two).

From a practical point of view, it's similar to transparentize/fade-out and opacify/fade-in.

Note

Be aware that unless the value passed for the alpha layer is less than 1, Sass will compile the resultant color as a hex value or a named CSS color.