CODEWITHSUNDEEP
sass
llobet
llobet

Reputation: 2790

Prevent hsl turning into hex color with Sass

Why HSL colors turns into hexadecimal format when using Sass?

.bgcolor{
  background-color: hsl(205,74%,66%);
  /* background-color: #68b3e8; */
}

Upvotes: 2

Views: 592

Answers (1)

llobet
llobet

Reputation: 2790

I found out this Sass issue and I realized two ways of preventing this conversion to happen:

  1. Overwriting hsl Sass native function

    @function hsl($h, $s, $l) {
  @return unquote('hsl(#{$h}, #{$s}, #{$l})');
}

.bgcolor{
  background-color: hsl(205,74%,66%);
}

  2. String it with #{} interpolation

    .bgcolor{
  background-color: #{'hsl(205,74%,66%)'};
}

Upvotes: 3

Related Questions