Beginning css preprocessors

Listing 3-41.  Example of a Variable Argument

@mixin fancyBorder($borderColor:#000, $borderWidth:2px,$fontProp…) {

  border: {

    color: $borderColor;

    width: $borderWidth;

    style: dashed;

  }

  font:$fontProp;

}

 

.specialNote{

  @include fancyBorder(#00F, 1px,1px arial,sans-serif)

}

Listing 3-42.  Output of Listing 

3-41

.specialNote {

  border-color: #00F;

  border-width: 1px;

  border-style: dashed;

  font: 1px arial, sans-serif;

} 

Using Content Blocks in Mixins

You can also pass blocks of styles to the mixin, which can be placed in addition to the styles provided by 

mixins. These styles are added wherever the @content rule is declared. The modified version of the previous 

example would look as shown in Listing 

3-43

.