Functions

Functions

SassScript defines some useful functions that are called using the normal CSS function syntax:

p {
  color: hsl(0, 100%, 50%);
}

is compiled to:

p {
  color: #ff0000; }

See this page for a full list of available functions.

Keyword Arguments

Sass functions can also be called using explicit keyword arguments. The above example can also be written as:

p {
  color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);
}

While this is less concise, it can make the stylesheet easier to read. It also allows functions to present more flexible interfaces, providing many arguments without becoming difficult to call.

Named arguments can be passed in any order, and arguments with default values can be omitted. Since the named arguments are variable names, underscores and dashes can be used interchangeably.

See Sass::Script::Functions for a full listing of Sass functions and their argument names, as well as instructions on defining your own in Ruby.