Assigning a Sass variable to an HSL value does not function properly when attempting to utilize it with HSLA

Question

Assigning a Sass variable to an HSL value does not function properly when attempting to utilize it with HSLA

My Sass variable is mapped to an hsl value, but when I try to use it with hsla to add transparency, it doesn't work. This is what I'm trying to do:

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

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

When using gulp-sass to build my CSS, I encounter this error: "required parameter $lightness is missing in call to function hsla on line {line number} in {file's path}"

If I replace hsla with rgba, it works fine. However, I prefer to keep all my colors in hsl format. Is there a workaround for this issue or is it a problem specific to Sass?

css colors sass hsl

Answer 1

Answer №1

The issue doesn't lie with SASS, as the feature simply isn't available. When consulting the official documentation, you'll notice that there are two variations of rgba(): one that requires individual parameters and another that accepts a Color object.

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

rgba($color, $alpha)

If we consider hsla(), it exclusively accepts separate values.

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

To accomplish your objective, you could follow this approach:

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

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

Alternatively, if you wish to utilize the Color object in your function, you would need to create a custom function since it's not possible to overload functions; for example, 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";
  }
}

Answer 2

The issue doesn't lie with SASS, as the feature simply isn't available. When consulting the official documentation, you'll notice that there are two variations of rgba(): one that requires individual parameters and another that accepts a Color object.

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

rgba($color, $alpha)

If we consider hsla(), it exclusively accepts separate values.

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

To accomplish your objective, you could follow this approach:

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

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

Alternatively, if you wish to utilize the Color object in your function, you would need to create a custom function since it's not possible to overload functions; for example, 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";
  }
}

Assigning a Sass variable to an HSL value does not function properly when attempting to utilize it with HSLA

Answer №1

Similar questions

The Google calendar integration is working, but the appearance leaves much to

Align the ion content (or text or label) to the center vertically

The animation to alter the width of a div using jQuery is not functioning correctly

Display a dynamic animation once the user switches to the tab

Is there a way for an element to automatically adjust its width to match another element?

Updating the content within a div following the submission of a contact form 7

Is there a way to decrease the speed of a text when hovering over it?

Launching Firefox using Bootstrap on a Mac for media query breakpoints

Struggling to center a MatIcon within a MatButtonToggle component in an Angular project

What is preventing Sublime Text from recognizing my pseudo classes as valid syntax?

Incorporating SCSS into HTML files when they are situated at the same hierarchy

Printing without sufficient paper will result in an incomplete printout

Form validation in HTML is not showing up as expected

Creating a replica of Airbnb using Bootstrap 5: Transforming the search bar into a button

Eliminate the outline of the pager row in an asp.net grid view

Update the button text after it has been clicked

Struggling with aligning images in the center of a square container

Is the z-index useless when the button is positioned behind divs and other elements?

What is the method for adding a before pseudo-element to my button element?

Aligning input and submit fields perfectly in the same line