有什么方法可以在 SASS 函数中使用 CSS 变量？

Question

我在我的根中定义了一种颜色：

 :root {
--purple: hsl(266, 35%, 70%);
}

我正在尝试在 SASS 函数中使用它以使其透明：

 .purple {
  background: transparentize(#{"var(--primary-color)"}, 0.7)
}

有谁知道让这个工作的方法？还是只是不可能？

原文由 sammiepls 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

简单的解决方案，需要两个变量而不是一个

与Romalex的回答类似，本文解释了一个优雅的解决方案： How to use CSS variables with Sass Mixins

您可以使用 RGB 3 数字列表定义您的颜色变量，然后您可以使用 Sass 透明化和其他颜色函数来操作它。

 :root {
  --color-primary: #16498a;
  --color-primary-rgb: 22, 73, 138;
}

h1 {
  color: var(--color-primary);
}

h2 {
  color: rgba(var(--color-primary-rgb), 0.4);
}

您可以编写自己的 Sass 函数来处理变量的加倍，如下例所示。

具有自定义 Sass 函数的完整解决方案

在本文中，您有这样一个示例：

如何结合 SASS 颜色函数和 CSS 变量

示例使用：

 :root {
  @include defineColorHSL(--color-primary, 220, 90%, 56%);
}

.component {
  color: alpha(var(--color-primary), 0.2); // it works 🎉
}

所需资源：

 // return css color variable with different opacity value
@function alpha($color, $opacity){
  $color: str-replace($color, 'var(');
  $color: str-replace($color, ')');
  $color-h: var(#{$color+'-h'});
  $color-s: var(#{$color+'-s'});
  $color-l: var(#{$color+'-l'});
  @return hsla($color-h, $color-s, $color-l, $opacity);
}

// replace substring with another string
// credits: https://css-tricks.com/snippets/sass/str-replace-function/
@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);
  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }
  @return $string;
}

@mixin defineColorHSL($color, $hue, $saturation, $lightness){
  #{$color}: unquote("hsl(#{$hue}, #{$saturation}, #{$lightness})");#{$color}-h: #{$hue};#{$color}-s: #{$saturation};#{$color}-l: #{$lightness};
}

原文由 prkos 发布，翻译遵循 CC BY-SA 4.0 许可协议