Built-In Modules
- Dart Sass
- since 1.23.0
- LibSass
- ✗
- Ruby Sass
- ✗
Only Dart Sass currently supports loading built-in modules with @use
. Users of other implementations must call functions using their global names instead.
Sass provides many built-in modules which contain useful functions (and the occasional mixin). These modules can be loaded with the @use
rule like any user-defined stylesheet, and their functions can be called like any other module member. All built-in module URLs begin with sass:
to indicate that they're part of Sass itself.
SCSS Syntax
@use "sass:color";
.button {
$primary-color: #6b717f;
color: $primary-color;
border: 1px solid color.scale($primary-color, $lightness: 20%);
}
Sass Syntax
@use "sass:color"
.button
$primary-color: #6b717f
color: $primary-color
border: 1px solid color.scale($primary-color, $lightness: 20%)
CSS Output
.button {
color: #6b717f;
border: 1px solid #878d9a;
}
Sass provides the following built-in modules:
The
sass:math
module provides functions that operate on numbers.The
sass:string
module makes it easy to combine, search, or split apart strings.The
sass:color
module generates new colors based on existing ones, making it easy to build color themes.The
sass:list
module lets you access and modify values in lists.The
sass:map
module makes it possible to look up the value associated with a key in a map, and much more.The
sass:selector
module provides access to Sass’s powerful selector engine.The
sass:meta
module exposes the details of Sass’s inner workings.
Global Functions
hsl($hue $saturation $lightness)
hsl($hue $saturation $lightness / $alpha)
hsl($hue, $saturation, $lightness, $alpha: 1)
hsla($hue $saturation $lightness)
hsla($hue $saturation $lightness / $alpha)
hsla($hue, $saturation, $lightness, $alpha: 1) //=> color
- Dart Sass
- since 1.15.0
- LibSass
- ✗
- Ruby Sass
- ✗
LibSass and Ruby Sass only support the following signatures:
hsl($hue, $saturation, $lightness)
hsla($hue, $saturation, $lightness, $alpha)
Note that for these implementations, the $alpha
argument is required if the function name hsla()
is used, and forbidden if the function name hsl()
is used.
- Dart Sass
- ✓
- LibSass
- ✗
- Ruby Sass
- since 3.7.0
LibSass and older versions of Ruby Sass don’t support alpha values specified as percentages.
Returns a color with the given hue, saturation, and lightness and the given alpha channel.
The hue is a number between 0deg
and 360deg
(inclusive). The saturation and lightness are numbers between 0%
and 100%
(inclusive). All these numbers may be unitless. The alpha channel can be specified as either a unitless number between 0 and 1 (inclusive), or a percentage between 0%
and 100%
(inclusive).
SCSS Syntax
@debug hsl(210deg 100% 20%); // #036
@debug hsl(34, 35%, 92%); // #f2ece4
@debug hsl(210deg 100% 20% / 50%); // rgba(0, 51, 102, 0.5)
@debug hsla(34, 35%, 92%, 0.2); // rgba(242, 236, 228, 0.2)
Sass Syntax
@debug hsl(210deg 100% 20%) // #036
@debug hsl(34, 35%, 92%) // #f2ece4
@debug hsl(210deg 100% 20% / 50%) // rgba(0, 51, 102, 0.5)
@debug hsla(34, 35%, 92%, 0.2) // rgba(242, 236, 228, 0.2)
if($condition, $if-true, $if-false)
Returns $if-true
if $condition
is truthy, and $if-false
otherwise.
This function is special in that it doesn’t even evaluate the argument that isn’t returned, so it’s safe to call even if the unused argument would throw an error.
rgb($red $green $blue)
rgb($red $green $blue / $alpha)
rgb($red, $green, $blue, $alpha: 1)
rgb($color, $alpha)
rgba($red $green $blue)
rgba($red $green $blue / $alpha)
rgba($red, $green, $blue, $alpha: 1)
rgba($color, $alpha) //=> color
- Dart Sass
- since 1.15.0
- LibSass
- ✗
- Ruby Sass
- ✗
LibSass and Ruby Sass only support the following signatures:
rgb($red, $green, $blue)
rgba($red, $green, $blue, $alpha)
rgba($color, $alpha)
Note that for these implementations, the $alpha
argument is required if the function name rgba()
is used, and forbidden if the function name rgb()
is used.
- Dart Sass
- ✓
- LibSass
- ✗
- Ruby Sass
- since 3.7.0
LibSass and older versions of Ruby Sass don’t support alpha values specified as percentages.
If $red
, $green
, $blue
, and optionally $alpha
are passed, returns a color with the given red, green, blue, and alpha channels.
Each channel can be specified as either a unitless number between 0 and 255 (inclusive), or a percentage between 0%
and 100%
(inclusive). The alpha channel can be specified as either a unitless number between 0 and 1 (inclusive), or a percentage between 0%
and 100%
(inclusive).
SCSS Syntax
@debug rgb(0 51 102); // #036
@debug rgb(95%, 92.5%, 89.5%); // #f2ece4
@debug rgb(0 51 102 / 50%); // rgba(0, 51, 102, 0.5)
@debug rgba(95%, 92.5%, 89.5%, 0.2); // rgba(242, 236, 228, 0.2)
Sass Syntax
@debug rgb(0 51 102) // #036
@debug rgb(95%, 92.5%, 89.5%) // #f2ece4
@debug rgb(0 51 102 / 50%) // rgba(0, 51, 102, 0.5)
@debug rgba(95%, 92.5%, 89.5%, 0.2) // rgba(242, 236, 228, 0.2)
If $color
and $alpha
are passed, this returns $color
with the given $alpha
channel instead of its original alpha channel.