Use SCSS to convert a CSS variable from HSL to Hex

Question

I have a number of CSS variables containing color values. I'd like to define these in HSL format, but can I let Sass convert these to hex values?

Input:

:root {
  --dark: hsl(210, 50%, 13%);
}

Output:

:root {
  --dark: #112132;
}

Luckyfella · Accepted Answer · 2024-05-10 11:06:21Z

0

According to the SASS documentation SASS has a build-in module to handle colors in hsl format:

https://sass-lang.com/documentation/modules/

From documentation:

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

answered May 10, 2024 at 11:06

Luckyfella

6806 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Peter Over a year ago

That does not result in hex values when used for CSS variables.

Luckyfella Over a year ago

I guess I slightly misread your post. I found a post with the summary SASS variables compile at runtime, CSS custom properties compile when they're used. - https://dev.to/nicm42/combining-sass-variables-with-css-custom-properties-5hj7 - seems that it does not work that way.

Collectives™ on Stack Overflow

Use SCSS to convert a CSS variable from HSL to Hex

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related