Beginning css preprocessors

Listing 2-15.  Example of Default Values

$borderRadius: 5px !default;

Listing 2-16.  Example of a Default Value Being Ignored When a Value Is Specified Explicitly

$borderRadius:10px;

.notArea{

        Border-radius:$borderRadius;

}

---

Chapter 2 

■

 IntroduCtIon to SaSS

24

Listing 2-17.  Output of Listing 

2-16

 

.notArea{

        Border-radius:10px;

}

If the code in Listing 

2-16

 runs without explicitly specifying the value for borderRadius, it will choose go 

ahead with default value. Output will thus be as shown in Listing 

2-18

.

Listing 2-18.  Output of Listing 

2-16

 Without Explicitly Defining a Value for borderRadius

.notArea{

        Border-radius:5px;

}

Nesting Styles in Sass

While writing CSS, you have to repeat the selectors to assign style rules for elements placed under some 

elements. The code shown in Listing 

2-19

 is a common example of selector repetition.

Listing 2-19.  Code Repetition in CSS

.article .h1 {

  font-weight: bold;

}

 

.article p {

  line-height: 1em;

}

 

.article img {

  float: left;

}

In Sass, you can avoid this code repetition by nesting CSS selectors. Thus, the code in Listing 

2-19

, 

rewritten in Sass, would look like Listing 

2-20

.

Listing 2-20.  Sass Version of the Code in Listing 

2-19

.article{

  .h1{

    font-weight:bold;

  }

  p{

    line-height:1em;

  }

  img{

    float:left;

  }

}

---

Chapter 2 

■

 IntroduCtIon to SaSS

25

This approach not only eliminates code repetition, it also makes the code more readable.

Nesting can be done with groups of selectors as well. This is shown in Listing 

2-21

.