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.
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.
| Function | Description |
|---|---|
| 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.
| Function | Description | Example | Result |
|---|---|---|---|
| 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 $color | hue(#42aed8) | 196.8deg |
| saturation($color) | Returns the hue of $color | saturation(#42aed8) | 65.7% |
| lightness($color) | Returns the hue of $color | lightness(#42aed8) | 55.2% |
| alpha($color) | Always returns 1 | alpha(#42aed8) | 1 |
The following functions allow us to manipulate colors.
The base color for the following examples is:
#42aed8
| Function | Description |
|---|---|
| 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.
| Function | Description | Example | Result |
|---|---|---|---|
| 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 number | round(5.25) | 5 |
| round(7.5) | 8 | ||
| ceil($number) | Round a number up to the nearest whole number | ceil(5.25) | 6 |
| floor($number) | Round a number down to the nearest whole number | floor(3.75) | 3 |
| abs($number) | Return the absolute value of a number | abs(8) | 8 |
| abs(-8) | 8 | ||
| min($numbers) | Return the smallest value in a list of numbers | min(3,5,-8,1,0) | -8 |
| max($numbers) | Return the largest value in a list of numbers | max(3,5,-8,16,0) | 16 |
| random() | Return a random value larger than 0 and smaller than 1 | random() | 0.85348 |
| random($limit) | Return a random whole number between 1 and the number specified by $limit, inclusive | random(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.
| 1 | 2 | 3 | 3 | 4 |
|---|---|---|---|---|
| h | e | l | l | o |
This allows for useful functions that can easily manipulate strings.
| Function | Description |
|---|---|
| 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.