Beginning css preprocessors

Listing 3-43.  Example of Content Block

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

  border: {

    color: $borderColor;

    width: $borderWidth;

    style: dashed;

  }

  font:$fontProp;

  @content;

}

 

.specialNote{

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

    line-height:0.8em;

  }

}

---

Chapter 3 

■

 advanCed SaSS

51

The output of this snippet is shown in Listing 

3-44

.

Listing 3-44.  Output of Listing 

3-43

.specialNote {

  border-color: #00F;

  border-width: 1px;

  border-style: dashed;

  font: 1px arial, sans-serif;

  line-height: 0.8em;

}

Function Directives

Functions in Sass perform specified operations on the provided arguments. The syntax of these functions is 

similar to CSS functions like rgb(). Unlike CSS functions, Sass functions can have keyword arguments and 

return values useful for Sass operations.

Sass provides built-in functions that are designed to be widely useful in many different circumstances, 

like color manipulation, and so on. In addition to that, Sass allows users to define their own functions, 

similar to defining mixins.

Some of the built-in functions provided by Sass are categorized as follows:

•  Numeric functions

•  Color functions

•  List functions

Numeric Functions

Sass provides a few functions for dealing with numeric values, especially for situations that come up 

frequently when writing stylesheets with Sass.

Some of these are discussed in the following sections.

abs($number)

This function will return an absolute value of the number, as shown in Listing 

3-45

.