Sass Functions
A brief introduction to SassScript functions. SassScript includes functions for color, lists, selectors, and more.
SassScript includes a large number of functions that can be used within your Sass files. Here are just a few.
Color Functions
SassScript includes functions that can be used when defining colors. For example, there's the lighten() and darken() functions to lighten or darken a color respectively. There's also the opacify() function to make a color more opaque, the transparentize() function to make a color more transparent, and a whole bunch of functions to retrieve a certain component of a color (such as the hue() function for retrieving the hue component of the color).
Here's an example of using the mix() function to mix two colors together:
This results in the following CSS being compiled:
The syntax is mix($color1, $color2, [$weight]). The optional $weight parameter determines the weight of $color1. If omitted, it will have a weight of 50%.
String Functions
SassScript has a number of functions for working with strings, such as quote() to add quotes to a string, str-length() to get the string length, and str-insert() to insert content into a string at a given position.
Number Functions
SassScript number functions include percentage() to convert a unitless number to a percentage, round() to round a number to the nearest whole number, min() and max() to retrieve the minimum or maximum of several numbers, and random() to return a random number.
List Functions
List functions include length() to return the length of a list, nth() to return a specific item in a list, join() to join two lists together, and append() to append a single value to the end of the list.
Map Functions
Map functions include map-get() to return the value in a map with a given key, map-merge() to merge two maps into a new map, and map-values() to return a list of values in a map.
Selector Functions
Selector functions include selector-nest() to nest selectors beneath one another like they would be nested in the stylesheet, selector-append() to append selectors to one another without spaces in between, and selector-unify() to unify two selectors to produce a selector that matches elements matched by both.
Introspection Functions
Introspection functions include feature-exists() to return whether a feature exists in the current Sass runtime, variable-exists() to return whether a variable with the given name exists in the current scope, and mixin-exists() to return whether a mixin with the given name exists.
Full List of SassScript Functions
There are many more SassScript functions available. For a full list, see the Sass documentation.