SCSS functions

List of functions for Service Portal SCSS compiler.

RGB functions

Function Description
rgb($red, $green, $blue) Creates a Color from red, green, and blue values.
rgba($red, $green, $blue, $alpha) Creates a Color from red, green, blue, and alpha values.
red($color) Gets the red component of a color.
green($color) Gets the green component of a color.
blue($color) Gets the blue component of a color.
mix($color1, $color2, [$weight]) Mixes two colors together.

HSL functions

Function Description Availability
hsl($hue, $saturation, $lightness) Creates a Color from hue, saturation, and lightness values. Yes
hsla($hue, $saturation, $lightness, $alpha) Creates a Color from hue, saturation, lightness, and alpha values. Yes
hue($color) Gets the hue component of a color. Yes
saturation($color) Gets the saturation component of a color. Yes
lightness($color) Gets the lightness component of a color. Yes
adjust-hue($color, $degrees) Changes the hue of a color. Yes
lighten($color, $amount) Makes a color lighter. Yes
darken($color, $amount) Makes a color darker. Yes
saturate($color, $amount) Makes a color more saturated. Yes
desaturate($color, $amount) Makes a color less saturated. Yes
grayscale($color) Converts a color to grayscale. Yes
complement($color) Returns the complement of a color. No
invert($color) Returns the inverse of a color. No

Opacity functions

Function Description Availability
alpha($color) Gets the alpha component (opacity) of a color. Yes
opacity($color) Gets the alpha component (opacity) of a color. Yes
rgba($color, $alpha) Changes the alpha component for a color. Yes
opacify($color, $amount) Makes a color more opaque. No
fade-in($color, $amount) Makes a color more opaque. No
transparentize($color, $amount) Makes a color more transparent. No
fade-out($color, $amount) Makes a color more transparent. No

Other color functions

Function Description Availability
adjust-color() Increases or decreases one or more components of a color. Yes
scale-color() Fluidly scales one or more properties of a color. Yes
change-color() Changes one or more properties of a color. No
ie-hex-str() Converts a color into the format understood by IE filters. No

String functions

Function Description Availability
unquote($string) Removes quotes from a string. Yes
quote($string) Adds quotes to a string. Yes
str-length($string) Returns the number of characters in a string. No
str-insert($string, $insert, $index) Inserts $insert into $string at $index. No
str-index($string, $substring) Returns the index of the first occurrence of $substring in $string. No
str-slice($string, $start-at, [$end-at]) Extracts a substring from $string. No
to-upper-case($string) Converts a string to upper case. No
to-lower-case($string) Converts a string to lower case. No

Number functions

Function Description Availability
percentage($number) Converts a unitless number to a percentage. Yes
round($number) Rounds a number to the nearest whole number. Yes
ceil($number) Rounds a number up to the next whole number. Yes
floor($number) Rounds a number down to the previous whole number. Yes
abs($number) Returns the absolute value of a number. Yes
min($numbers…) Finds the minimum of several numbers. Yes
max($numbers…) Finds the maximum of several numbers. Yes
random([$limit]) Returns a random number. No

List functions

Lists in SCSS are immutable. All list functions return a new list rather than updating the existing list in-place.

All list functions work for maps as well, treating them as lists of pairs.

Function Description
length($list) Returns the length of a list.
nth($list, $n) Returns a specific item in a list.
set-nth($list, $n, $value) Replaces the nth item in a list.
join($list1, $list2) Joins two lists into one.
append($list1, $val) Appends a single value onto the end of a list.
zip($lists…) Combines several lists into a single multidimensional list.
index($list, $value) Returns the position of a value within a list.
list-separator($list) Returns the separator of a list.

Adding custom functions

Scss @function my-calculation-function($some-number, $another-number){ @return $some-number + $another-number }