使用Sass防止hsl变成六角形颜色

Question

为什么使用Sass时HSL颜色会变成十六进制格式？

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

Answer 1

我发现了这个Sass issue，我意识到了两种阻止这种转变发生的方法：

1. 覆盖hsl Sass原生函数

   @function hsl($h, $s, $l) {
     @return unquote('hsl(#{$h}, #{$s}, #{$l})');
   }
   
   .bgcolor{
     background-color: hsl(205,74%,66%);
   }
   

2. 使用#{}插值

   对其进行字符串化

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