Thank you for your feedback.
Form temporarily unavailable. Please try again or contact docfeedback@servicenow.com to submit your comments.
Versions
  • Madrid
  • London
  • Kingston
  • Jakarta
  • Istanbul
  • Helsinki
  • Geneva
  • Store
Close

SCSS functions

Log in to subscribe to topics and get notified when content changes.

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 }

Feedback