角度cli：如何防止在构建时将hsl颜色转换为十六进制值

Question

我正试图在背景中添加一个hsl颜色值，但该值将转换为hex值 我该如何配置angular-cli不会发生这种情况。

示例应用https://stackblitz.com/edit/css-test-z?file=src%2Fstyles.scss

Answer 1

您可以创建sass函数，将其值返回为hsl，因此不会更改为十六进制

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

.s{
  background-color: hsla(3, 100%, 61%); ;
}

demo Disable converting hsl()/hsla()