Only Dart Sass currently supports loading built-in modules with@use. Usersof 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 calledlike any other module member. All built-in module URLs begin withsass: to indicate that they’re part of Sass itself.

⚠️ Heads up!

Before the Sass module system was introduced, all Sass functions were globallyavailable at all times. Many functions still have global aliases (these arelisted in their documentation). The Sass team discourages their use and willeventually deprecate them, but for now they remain available for compatibilitywith older Sass versions and with LibSass (which doesn’t support the modulesystem yet).

A few functions areonly available globally even in the new modulesystem, either because they have special evaluation behavior (if()) orbecause they add extra behavior on top of built-inCSS functions (rgb()andhsl()). These will not be deprecated and can be used freely.

• SCSS
• Sass
• CSS

Playground

SCSS Syntax

@use"sass:color";

.button{
$primary-color: #6b717f;
color:$primary-color;
border: 1px solid color.scale($primary-color,$lightness: 20%);
}

Playground

Sass Syntax

@use "sass:color"

.button
$primary-color: #6b717f
color:$primary-color
border: 1px solid color.scale($primary-color,$lightness: 20%)

.button{
color: #6b717f;
border: 1px solidrgb(135.1641025641, 140.8256410256, 154.0358974359);
}

💡 Fun fact:

You can passspecial functions likecalc() orvar() in place of anyargument to a global color constructor. You can even usevar() in place ofmultiple arguments, since it might be replaced by multiple values! When acolor function is called this way, it returns an unquoted string using thesame signature it was called with.

• SCSS
• Sass

Playground

SCSS Syntax

@debugrgb(0 51 102/var(--opacity));// rgb(0 51 102 / var(--opacity))
@debugcolor(display-p3var(--peach));// color(display-p3 var(--peach))

Playground

Sass Syntax

@debug rgb(0 51 102 / var(--opacity))  // rgb(0 51 102 / var(--opacity))
@debug color(display-p3 var(--peach))  // color(display-p3 var(--peach))

color($space$channel1$channel2$channel3)color($space$channel1$channel2$channel3/$alpha)//=>color

Compatibility:

Dart Sass

since 1.78.0

LibSass

✗

Ruby Sass

✗

Returns a color in the given color space with the given channel values.

This supports the color spacessrgb,srgb-linear,display-p3,a98-rgb,prophoto-rgb,rec2020,xyz, andxyz-d50, as well asxyz-d65 which isan alias forxyz. For all spaces, the channels are numbers between 0 and 1(inclusive) or percentages between0% and100% (inclusive).

If any color channel is outside the range 0 to 1, this represents a coloroutside the standard gamut for its color space.

• SCSS
• Sass

Playground

SCSS Syntax

@debugcolor(srgb 0.1 0.6 1);// color(srgb 0.1 0.6 1)
@debugcolor(xyz 30% 0% 90%/ 50%);// color(xyz 0.3 0 0.9 / 50%)

Playground

Sass Syntax

@debug color(srgb 0.1 0.6 1)  // color(srgb 0.1 0.6 1)
@debug color(xyz 30% 0% 90% / 50%)  // color(xyz 0.3 0 0.9 / 50%)

hwb($hue$whiteness$blackness)hwb($hue$whiteness$blackness/$alpha)color.hwb($hue$whiteness$blackness)color.hwb($hue$whiteness$blackness/$alpha)color.hwb($hue,$whiteness,$blackness,$alpha: 1)//=>color

Compatibility:

Dart Sass

since 1.78.0

LibSass

✗

Ruby Sass

✗

Returns a color with the givenhue, whiteness, and blackness and thegiven alpha channel.

The hue is a number between0deg and360deg (inclusive) and may beunitless. The whiteness and blackness are numbers typically between0% and100% (inclusive) and maynot be unitless. The alpha channel can bespecified as either a unitless number between 0 and 1 (inclusive), or apercentage between0% and100% (inclusive).

A hue outside0deg and360deg is equivalent to$hue % 360deg. If$whiteness + $blackness > 100%, the two values are scaled so that they addup to100%. If$whiteness,$blackness, or both are less than0%, thisrepresents a color outside the standardRGB gamut.

• SCSS
• Sass

Playground

SCSS Syntax

@debughwb(210deg 0% 60%);// #036
@debughwb(210 0% 60%/ 0.5);// rgba(0, 51, 102, 0.5)

Playground

Sass Syntax

@debug hwb(210deg 0% 60%)  // #036
@debug hwb(210 0% 60% / 0.5)  // rgba(0, 51, 102, 0.5)

if($condition,$if-true,$if-false)

Returns$if-true if$condition istruthy, and$if-false otherwise.

This function is special in that it doesn’t even evaluate the argument thatisn’t returned, so it’s safe to call even if the unused argument would throwan error.

• SCSS
• Sass

Playground

SCSS Syntax

@debugif(true, 10px, 15px);// 10px
@debugif(false, 10px, 15px);// 15px
@debugif(variable-defined($var),$var,null);// null

Playground

Sass Syntax

@debug if(true, 10px, 15px)  // 10px
@debug if(false, 10px, 15px)  // 15px
@debug if(variable-defined($var), $var, null)  // null

lab($lightness$a$b)lab($lightness$a$b/$alpha)//=>color

Compatibility:

Dart Sass

since 1.78.0

LibSass

✗

Ruby Sass

✗

Returns a color with the given [lightness, a, b], and alpha channels.

The lightness is a number between0% and100% (inclusive) and may beunitless. The a and b channels can be specified as eitherunitless numbersbetween -125 and 125 (inclusive), or percentages between-100% and100%(inclusive). The alpha channel can be specified as either a unitless numberbetween 0 and 1 (inclusive), or a percentage between0% and100%(inclusive).

A lightness outside the range0% and100% is clamped to be within thatrange. If the a or b channels are outside the range-125 to125, thisrepresents a color outside the standardCIELAB gamut.

• SCSS
• Sass

Playground

SCSS Syntax

@debuglab(50% -20 30);// lab(50% -20 30)
@debuglab(80% 0% 20%/ 0.5);// lab(80% 0 25 / 0.5);

Playground

Sass Syntax

@debug lab(50% -20 30)  // lab(50% -20 30)
@debug lab(80% 0% 20% / 0.5)  // lab(80% 0 25 / 0.5);

lch($lightness$chroma$hue)lch($lightness$chroma$hue/$alpha)//=>color

Compatibility:

Dart Sass

since 1.78.0

LibSass

✗

Ruby Sass

✗

Returns a color with the given [lightness, chroma, and hue], and the givenalpha channel.

The lightness is a number between0% and100% (inclusive) and may beunitless. The chroma channel can be specified as either aunitless numberbetween 0 and 150 (inclusive), or a percentage between0% and100%(inclusive). The hue is a number between0deg and360deg (inclusive) andmay be unitless. The alpha channel can be specified as either a unitlessnumber between 0 and 1 (inclusive), or a percentage between0% and100%(inclusive).

A lightness outside the range0% and100% is clamped to be within thatrange. A chroma below 0 is clamped to 0, and a chroma above 150 represents acolor outside the standardCIELAB gamut. A hue outside0deg and360deg isequivalent to$hue % 360deg.

• SCSS
• Sass

Playground

SCSS Syntax

@debuglch(50% 10 270deg);// lch(50% 10 270deg)
@debuglch(80% 50% 0.2turn/ 0.5);// lch(80% 75 72deg / 0.5);

Playground

Sass Syntax

@debug lch(50% 10 270deg)  // lch(50% 10 270deg)
@debug lch(80% 50% 0.2turn / 0.5)  // lch(80% 75 72deg / 0.5);

oklab($lightness$a$b)oklab($lightness$a$b/$alpha)//=>color

Compatibility:

Dart Sass

since 1.78.0

LibSass

✗

Ruby Sass

✗

Returns a color with the givenperceptually-uniform lightness, a, b, andalpha channels.

The lightness is a number between0% and100% (inclusive) and may beunitless. The a and b channels can be specified as eitherunitless numbersbetween -0.4 and 0.4 (inclusive), or percentages between-100% and100%(inclusive). The alpha channel can be specified as either a unitless numberbetween 0 and 1 (inclusive), or a percentage between0% and100%(inclusive).

A lightness outside the range0% and100% is clamped to be within thatrange. If the a or b channels are outside the range-0.4 to0.4, thisrepresents a color outside the standard Oklab gamut.

• SCSS
• Sass

Playground

SCSS Syntax

@debugoklab(50% -0.1 0.15);// oklab(50% -0.1 0.15)
@debugoklab(80% 0% 20%/ 0.5);// oklab(80% 0 0.08 / 0.5)

Playground

Sass Syntax

@debug oklab(50% -0.1 0.15)  // oklab(50% -0.1 0.15)
@debug oklab(80% 0% 20% / 0.5)  // oklab(80% 0 0.08 / 0.5)

oklch($lightness$chroma$hue)oklch($lightness$chroma$hue/$alpha)//=>color

Compatibility:

Dart Sass

since 1.78.0

LibSass

✗

Ruby Sass

✗

Returns a color with the given [perceptually-uniform lightness, chroma, andhue], and the given alpha channel.

The lightness is a number between0% and100% (inclusive) and may beunitless. The chroma channel can be specified as either aunitless numberbetween 0 and 0.4 (inclusive), or a percentage between0% and100%(inclusive). The hue is a number between0deg and360deg (inclusive) andmay be unitless. The alpha channel can be specified as either a unitlessnumber between 0 and 1 (inclusive), or a percentage between0% and100%(inclusive).

A lightness outside the range0% and100% is clamped to be within thatrange. A chroma below 0 is clamped to 0, and a chroma above 0.4 represents acolor outside the standard Oklab gamut. A hue outside0deg and360deg isequivalent to$hue % 360deg.

• SCSS
• Sass

Playground

SCSS Syntax

@debugoklch(50% 0.3 270deg);// oklch(50% 0.3 270deg)
@debugoklch(80% 50% 0.2turn/ 0.5);// oklch(80% 0.2 72deg / 0.5);

Playground

Sass Syntax

@debug oklch(50% 0.3 270deg)  // oklch(50% 0.3 270deg)
@debug oklch(80% 50% 0.2turn / 0.5)  // oklch(80% 0.2 72deg / 0.5);