CSS: Using Hsl Variable in Hsla

Using CSS Variables in HSLA in SCSS

Hey I think what your want to do in SCSS is to treat the whole function as a string.
This should work background: #{hsla(var(--color), 0.5)} that would output on CSS as background: hsla(var(--color), 0.5);

CSS: Using hsl variable in hsla?

In the near future yes:

:root {
    --white-1: hsl(0deg 0% 100%);
    --white-2: hsl(from var(--white-1) h s l / 50%);  
}

CSS variable calculation of HSL values

You are missing percentages. the syntax should be hsl(h, s%, l%) (https://www.w3.org/TR/css-color-3/)

:root {
    --hue: 201;
    --saturation: 31%; /* here */
    --lightness: 40; 
    --mainColor: hsl(var(--hue),var(--saturation),var(--lightness));

    --difference: 20;

    --lightnessPlus: calc((var(--lightness) + var(--difference))*1%); /* here */
    --colorFrom: hsl(var(--hue),var(--saturation),var(--lightnessPlus));

    --lightnessMinus: calc((var(--lightness) - var(--difference))*1%);  /* here */
    --colorTo: hsl(var(--hue),var(--saturation),var(--lightnessMinus));
}

body {
    background-image: linear-gradient(to right, var(--colorFrom), var(--colorTo));
}

Using a Sass variable mapped to an hsl value doesn't work when trying to use it with hsla

It's not an issue with SASS, the functionality simply doesn't exist. If you look at the documentation, there are two versions of rgba(), one that accepts all of the parameters separately and one that accepts a Color object.

rgba($red, $green, $blue, $alpha)
rgba($color, $alpha)

If you look at the documentation for hsla(), it only accepts the values separately.

hsla($hue, $saturation, $lightness, $alpha)

To achieve your goal, you could do this:

$white:hsl(100, 100%, 100%);

.thing{
 color: hsla(hue($white), saturation($white), lightness($white), .9);
}

Or... if you want to pass the Color object, you can create your own function since you can't overload functions; e.g. hslac($color, $alpha)

@function hslac($color, $alpha) {
  @if(type-of($color) == "color") {
    @return hsla(hue($color), saturation($color), lightness($color), $alpha);
  }
  @else {
    @error "You didn't pass a color object";
  }
}

Using CSS custom property in SCSS hsla() function

Try like below. You need comma with hsla() using the old syntax

:root {
--color-white: 0, 0%, 100%;
}

.box {
  color: hsla(#{var(--color-white), 1});
}

Or use the new syntax where you need / before the alpha

:root {
--color-white: 0 0% 100%;
}

.box {
  color: hsl(#{var(--color-white) / 100%});
}

Reference: https://www.w3.org/TR/css-color-4/#the-hsl-notation

How do I use hsla as background-color in CSS?

The second and third values should have %.

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsla()#values

<h1 style="background-color: hsla(302, 59%, 65%, 0.6);">
foobar
</h1>

How do you control an HSLA alpha channel in a SCSS color function?

If you define $base-blue using hsl instead of hsla, you can adjust its alpha value dynamically within your color() function.

$base-blue: hsl(200, 100%, 50%);

$palette: (
    blue: (
        base:  $base-blue,
        light: lighten($base-blue, 10%),
        dark:  darken($base-blue, 10%)
    )
);

@function color($color, $tone: 'base', $a: 1) {
    $rgb: map-get(map-get($palette, $color), $tone);
    @return rgba($rgb, $a); // Apply the alpha value
}

.item {
    color: color(blue);            // Output: #00aaff
    color: color(blue, light);     // Output: #33bbff
    color: color(blue, dark);      // Output: #0088cc
    color: color(blue, dark, .5);  // Output: rgba(0, 136, 204, 0.5)
}

---

Related Topics