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.
SassScript includes functions that can be used when defining colors. For example, there's the
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
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.
SassScript number functions include
percentage() to convert a unitless number to a percentage,
round() to round a number to the nearest whole number,
max() to retrieve the minimum or maximum of several numbers, and
random() to return a random number.
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 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 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 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.