Sass Functions

Sass functions are perhaps the most useful aspect of the language.

In addition to the functions that Sass provides natively, you can also write your own functions in Ruby. But since this is a Sass course, not a Ruby course, we won't be talking about that here.

You can use standard CSS function syntax to call Sass functions. For example the rgb() function:

p {
  color: rgb(42, 154, 179);
}

which output will be as follows:

p {
    color: #2a9ab3;
}

Sass also lets you specify the arguments to the function by their name, also in any order:

p {
  color: rgb($red: 42, $blue: 154, $green: 179);
}

note

Note that the argument names are prefixed with the dollar sign (the same syntax used to identify variables)

Another example:

#argument {
  color: rgb($red: 42, $green: 179, $blue: 154);
}

#variable {
  $red: 42;
  color: rgb($red: $red, $green: 179, $blue: 154);
}

and the output will be:

#argument {
  color: #2ab39a;
}

#variable {
  color: #2ab39a;
}

Sass include various function for string, numeric, list, map, selector and introspection. We will see all these functions in the next chapters.

Miscellaneous Functions

Function	Description	Example
`call($name, $args..)`	Calls a Sass or CSS function, passing any remaining arguments to the function	`call(floor, 3, 5, 7, 1)` Result: 1
`if($condition, $if-true, $if-false)`	Returns `$if-true` if `$condition` evaluates to true, otherwise returns `$if-false`.	`if(1==1, 10px, 20px)` Result: 10px
`unique-id()`	Returns a random unique CSS identifier	`unique-id()` Result: "utewylqbn"

Sass Functions

Miscellaneous Functions​

Table of Contents

Miscellaneous Functions