Sass/SCSS Built-in Functions Tutorial

In this Sass/SCSS tutorial we learn how to use Sass's built-in functions to easily manipulate colors, numbers and strings.

Here's a table of contents of what you'll learn in this lesson:
(click on a link to skip to its section)

Let's jump right in.

What are built-in functions

Built-in functions are globally available helper functions to aid in development.

Modules have not been implemented for Node-Sass yet, so it still uses global built-in functions at this time.

Sass Color Functions

The following functions create a color based on one of two color models.

FunctionDescription
rgb($red,$green,$blue)Creates an opaque color based on the specified decimal values or percentages
Example:
rgb(55,113,139)
Result:
#37718b
Example:
rgb(40%,70%,100%)
Result:
#66b2ff
rgba($red,$green,$blue,$alpha)Creates an RGB color with a specified decimal value for opacity.
Example:
rgb(55,113,139,.5)
Result:
50% opacity
hsl($hue,$saturation,$lightness)Creates an opaque color based on the specified hue (in degrees), saturation and lightness (in percentages)
Example:
hsl(192,68%,46%)
Result:
#25a5c5
hsla($hue,$saturation,$lightness,$alpha)Creates an HSL color with a specified decimal value for opacity.
Example:
hsla(192,68%,46%,.5)
Result:
50% opacity
grayscale($color)Returns a gray with the same intensity as $color
Example:
grayscale(#38ad72)
Result:
#737373
complement($color)Returns a color with the same saturation and lightness (value), but with a hue 180 degrees from the hue of $color.
Example:
complement(#38ad72)
Result:
#ad3873
invert($color)Returns the inverse of the individual red, green and blue components of $color.
Example:
invert(#bd5127)
Result:
#42aed8

The following functions extract single components from colors.

FunctionDescriptionExampleResult
red($color)Returns the red component of $color.red(#42aed8)66
green($color)Returns the green component of $color.green(#42aed8)174
blue($color)Returns the blue component of $color.blue(#42aed8)216
hue(($color)Returns the hue of $colorhue(#42aed8)196.8deg
saturation($color)Returns the hue of $colorsaturation(#42aed8)65.7%
lightness($color)Returns the hue of $colorlightness(#42aed8)55.2%
alpha($color)Always returns 1alpha(#42aed8)1

The following functions allow us to manipulate colors.

The base color for the following examples is:

#42aed8
FunctionDescription
mix($color1,$color2,[$weight])Combines two colors by averaging the red, green and blue components. The optional $weight parameter determines how much of the first color is included (the default is 50%).
Example:
mix(#42aed8,#ff0000,80)
Result:
#688bad
adjust-hue($color,$degrees)Rotates the hue of $color by the specified degrees
Example:
adjust-hue(#42aed8,20)
Result:
#427cd8
lighten($color,$amount)Lightens the specified color by the percentage specified in $amount
Example:
lighten(#42aed8,10)
Result:
#6cc0e1
darken($color,$amount)Darkens the specified color by the percentage specified in $amount
Example:
darken(#42aed8,20)
Result:
#1f7495
saturate($color,$amount)Increases the saturation of the specified color by the percentage specified in $amount
Example:
saturate(#42aed8,50)
Result:
#1bbfff
desaturate($color,$amount)Decreases the saturation of the specified color by the percentage specified in $amount
Example:
desaturate(#42aed8,30)
Result:
#649fb6
transparentize($color,$amount)Reduces the opacity of $color by the percentage specified in $alpha
Example:
transparentize(#42aed8,.3)
Result:
rgba(66,174,216,.7)
adjust-color($color,[$red],[$green],[$blue],[$saturation],[$lightness],[$alpha])Changes $color by one or more of the named arguments.
Example:
adjust-color(#42aed8,$red:70)
Result:
#88aed8
scale-color($color,[$red],[$green],[$blue],[$saturation],[$lightness],[$alpha])Adjusts $color by the amount specified in one or more named arguments. If the argument is a positive number, the adjustment is towards the maximum value for that component. If it is negative, the adjustment is towards the minimum value.
Example:
scale-color(#42aed8, $red: 70%)
Result:
#c6aed8
Example:
scale-color(#42aed8,$red:-70%)
Result:
#14aed8
change-color($color, [$red],[$green],[$blue],[$saturation],[$lightness],[$alpha])Replaces the component of $color with the value specified in one or more named parameters.
Example:
change-color(#42aed8,$green:255)
Result:
#42ffd8

Sass Math Functions

Sass provides us with a basic set of mathematic functions to manipulate numeric values.

Note that we can use CSS value descriptors like “rem” or “px” in all functions except percentage() . Sass will ignore the unit, discarding them from the results.

FunctionDescriptionExampleResult
percentage($number)Convert a unitless number to a percentage (Multiplies number by 100)percentage(3.5)350
percentage(1em)syntax error
round($number)Round a number to the nearest whole numberround(5.25)5
round(7.5)8
ceil($number)Round a number up to the nearest whole numberceil(5.25)6
floor($number)Round a number down to the nearest whole numberfloor(3.75)3
abs($number)Return the absolute value of a numberabs(8)8
abs(-8)8
min($numbers)Return the smallest value in a list of numbersmin(3,5,-8,1,0)-8
max($numbers)Return the largest value in a list of numbersmax(3,5,-8,16,0)16
random()Return a random value larger than 0 and smaller than 1random()0.85348
random($limit)Return a random whole number between 1 and the number specified by $limit, inclusiverandom(8)3

Sass String Functions

A string is a list of characters that make up words or sentences.

As an example, let’s consider the word ‘hello’. Each letter in the word is a list element with a corresponding index.

12334
hello

This allows for useful functions that can easily manipulate strings.

FunctionDescription
unquote($string)Removes any quotes around a string
Example: unquote(“hello”)Result: hello
quote($string)Add quotes to an unquoted string
Example: quote(hello)Result: “hello”
Example: quote(“hello”)Result: “hello”
str-length($string)Return the number of characters in a string
Example: str-length(“hello”)Result: 5
str-insert($string,$insert,$index)Insert the string specified as $insert at the specified index position inside string
Example: str-insert(” world”,“hello”,0)Result: “hello world”
str-index($string,$substring)Return the index of the first occurrence of $substring inside $string, or null if the string is not found
Example: str-index(“Hello”,“H”)Result: 1
Example: str-index(“hello”,“H”)Result: null
str-slice($string,$start-at,[$end-at])Return a substring beginning at position $start-at and, optionally, ending at position $end-at
Example: str-slice(“hello, world”,8)Result: “world”
Example: str-slice(“hello, world”,9,10)Result: “or”
to-upper-case($string)Return a string containing $string converted to upper case
Example: to-upper-case(“hello”)Result: “HELLO”
to-lower-case($string)Return a string containing $string converted to lower case
Example: to-lower-case(“Hello”)Result: “hello”

Summary: Points to remember

  • Sass provides us with many handy built-in functions to make development easier.
  • Only Dart-Sass currently supports the module system, Node Sass still makes use of global functions.