Beginning css preprocessors

Listing 2-42.  Parentheses in Action

.leftSide{

        Font-size:1em + (.2em*2);

}

Listing 2-43.  Output of Listing 

2-42

 

.leftSide{

        Font-size:1.4em;

}

Calculations Using Variables

Calculations can be performed with variables as well. Check out Listing 

2-44

.

Listing 2-44.  Example of Performing Calculations Using Variables

$container:100%;

$contentArea:50%;

$gutter:10%;

.sidebar{

  width: $container - ($contentArea+$gutter);

}

Control Directives

Sass provides control directives for including styles or bringing some variations in styles based on some 

condition.

Control directives are complex and aren’t typically used on a daily basis. They are mainly used in mixins 

in order to make them flexible. This is commonly seen in mixins within libraries like Compass, which is 

covered in coming chapters.

---

Chapter 2 

■

 IntroduCtIon to SaSS

31

@if

This control directive takes an expression and applies the associated style if the expression evaluates to 

something other than false or null, as shown in Listing 

2-45

.