Skip to main content

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 follow:

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

FunctionDescriptionExample
call($name, $args..)Calls a Sass or CSS function, passing any remaining arguments to the functioncall(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 identifierunique-id() Result: "utewylqbn"

Table of Contents