Beginning css preprocessors

Listing 3-49.  Example Using round

$fontsize:1.1em;

.container{

  // Will use 1em

  font-size:round($fontsize);

}

---

Chapter 3 

■

 advanCed SaSS

53

Color Functions

Sass provided various functions for transforming the colors, such as adjust_color, complement, greyscale, 

invert, etc.

Some of these are described in the following sections.

adjust_color($color,…)

This function is used to assign individual properties of colors such as red, green, blue, etc. The properties  

are specified as keyword arguments and values are added or subtracted from the original value (see  

Listing 

3-50

). The following properties of the color can be transformed using this function:

•  Red

•  Green

•  Blue

•  Hue

•  Lightness

•  Alpha 

Listing 3-50.  Example Showing adjust_color

$fontcolor:#900;

.container{

  color:adjust_color($fontcolor,$red:-5);

}

complement($color)

This function returns the complement of the color, as shown in Listing 

3-51

.

Listing 3-51.  Example Showing complement

$fontcolor:#FF0000;

.container{

  color:complement($fontcolor);

}

The output of the previous code snippet is shown in Listing 

3-52

.