Beginning css preprocessors

Listing 3-35.  CSS Selectors Within a Mixin

@mixin importantInfo {

  font-weight:strong;

  li {

    margin: 0px 5px;

  }

}

 

.notfication{

  border-radius:35%;

  @include importantInfo;

}

This example creates a mixin named importantInfo, which contains its own style rule plus the CSS 

selector li with its own rule. This is included in the notification class. The result of this code is shown in 

Listing 

3-36

.

Listing 3-36.  Output of Listing 

3-35

.notfication {

  border-radius: 35%;

  font-weight:strong;

}

 

.notfication li {

  margin: 0px 5px;

}

Arguments to Mixins

Mixins in Sass can accept arguments that are provided while calling that mixin. This helps the mixin provide 

different behaviors, depending on arguments provided and thus make it useful for a wide range of scenarios.

Arguments are passed as comma-separated lists of variables, inside parentheses, after the name of the 

mixin. This is demonstrated in Listing 

3-37

.

---

Chapter 3 

■

 advanCed SaSS

49