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

function_exists($name) Check whether a function with the given name exists. Examples: function-exists(lighten) => true @function myfunc { @return "something"; } function-exists(myfunc) => true Parameters: name (String) — The name of the function to check. Returns: (Bool) — Whether the function is defined.

desaturate($color, $amount) Makes a color less saturated. Takes a color and a number between 0% and 100%, and returns a color with the saturation decreased by that value. Examples: desaturate(hsl(120, 30%, 90%), 20%) => hsl(120, 10%, 90%) desaturate(#855, 20%) => #726b6b Parameters: $color (Color) $amount (Number) — The amount to decrease the saturation by, between 0% and 100% Returns: (Color) Raises: (ArgumentError) — if $amount is out of bounds, or either parameter

Data Types SassScript supports seven main data types: numbers (e.g. 1.2, 13, 10px) strings of text, with and without quotes (e.g. "foo", 'bar', baz) colors (e.g. blue, #04a3f9, rgba(255, 0, 0, 0.5)) booleans (e.g. true, false) nulls (e.g. null) lists of values, separated by spaces or commas (e.g. 1.5em 1em 0 2em, Helvetica, Arial, sans-serif) maps from one value to another (e.g. (key1: value1, key2: value2)) SassScript also supports all other types of CSS property value, such as Unicode range

counters($args...) This function only exists as a workaround for IE7‘s content: counter bug. It works identically to any other plain-CSS function, except it avoids adding spaces between the argument commas. Examples: counters(item, ".") => counters(item,".") Returns: (String)

complement($color) Returns the complement of a color. This is identical to adjust-hue(color, 180deg). Parameters: $color (Color) Returns: (Color) Raises: (ArgumentError) — if $color isn’t a color

counter($args...) This function only exists as a workaround for IE7‘s content: counter bug. It works identically to any other plain-CSS function, except it avoids adding spaces between the argument commas. Examples: counter(item, ".") => counter(item,".") Returns: (String)

darken($color, $amount) Makes a color darker. Takes a color and a number between 0% and 100%, and returns a color with the lightness decreased by that amount. Examples: darken(hsl(25, 100%, 80%), 30%) => hsl(25, 100%, 50%) darken(#800, 20%) => #200 Parameters: $color (Color) $amount (Number) — The amount to decrease the lightness by, between 0% and 100% Returns: (Color) Raises: (ArgumentError) — if $amount is out of bounds, or either parameter is the wrong type

comparable($number1, $number2) Returns whether two numbers can added, subtracted, or compared. Examples: comparable(2px, 1px) => true comparable(100px, 3em) => false comparable(10cm, 3mm) => true Parameters: $number1 (Number) $number2 (Number) Returns: (Bool) Raises: (ArgumentError) — if either parameter is the wrong type

change_color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha]) Changes one or more properties of a color. This can change the red, green, blue, hue, saturation, value, and alpha properties. The properties are specified as keyword arguments, and replace the color’s current value for that property. All properties are optional. You can’t specify both RGB properties ($red, $green, $blue) and HSL properties ($hue, $saturation, $value) at the same time. Examples: c