Beginning css preprocessors

Listing 3-37.  Passing Arguments in Mixins

@mixin fancyBorder($fbColor, $fbWidth) {

  border-color: $fbColor;

  border-width: $fbWidth;

  border-style: dashed;

}

 

.specialNote{

  @include fancyBorder(#000,2px)

}

This example includes the mixin named fancyBorder, which takes two arguments: borderColor and 

borderWidth. The output of this is shown in Listing 

3-38

.

Listing 3-38.  Output of Listing 

3-37

.specialNote {

  border-color: #000;

  border-width: 2px;

  border-style: dashed;

}

Mixins can also assume default values for their arguments. Thus, when you don’t pass any value to the 

mixin, it will assume the default values. This can be demonstrated by modifying the code in Listing 

3-39

.

Listing 3-39.  Example Demonstrating Default Variables

@mixin fancyBorder($fbColor:#000, $fbWidth:2px) {

  Border-color: $fbColor;

  Border-width: $fbWidth;

  Border-style: dashed;

}

 

.specialNote{

  @include fancyBorder;

}

Mixins also allow you to pass keyword arguments. This makes mixins even more flexible by allowing 

arguments to be passed in any order. This is shown in Listing 

3-40

.