Beginning css preprocessors

Listing 3-52.  Output of Listing 

3-53

.

.container {

  color: cyan;

}

---

Chapter 3 

■

 advanCed SaSS

54

grayscale($color)

This function returns the grayscale version of a color. This is demonstrated in Listing 

3-53

.

Listing 3-53.  Example of grayscale

$fontcolor:#FFCC00;

.container{

  color:grayscale($fontcolor);

}

List Functions

One of the most important functions among the list functions is nth($list, $n). It’s used to fetch a single 

item from the list. Unlike with JavaScript, Sass lists start counting from 1.

Thus, nth(10px 20px 30px, 1) will return 10px as a result.

Another important function is join. join($list1, $list2, [$separator]) is used to generate a new 

list by combining two lists. Each value in the list counts as a single item, and the function can also be used to 

make lists out of individual items. The optional $separator argument determines which type of list it should 

be; it can be a space or a comma. If it’s left out, the $list1 type is used.

Another simple yet important function is length($list). It returns the number of items in $list. So 

length(10 22 33) is 3.

User-Defined Functions

The @function directive is used for defining your own function. This can be useful when you want to 

perform actions that are not natively supported. @function is similar to @mixin, except that @function 

returns a result.

The @return directive is an important component of @function, which has a behavior similar to return 

in JavaScript. It accepts Sass expressions, processes them, and returns the result. Additionally, it stops the 

function execution after @return is triggered.

Consider a simple example of building a function. This example writes a function that generates width 

per column based on the number of columns provided, as shown in Listing 

3-54

.