Sass：在 rgba 中用作颜色

Question

我创建了带有颜色及其修改（浅色、深色等）的地图以及用于从该地图中获取值的自定义函数。

$colors: (
  text: #383838,
  cyan: (
    base: #54c2e3,
    light: lighten(#54c2e3, 15%),
    dark: darken(#54c2e3, 15%)
  )
)

@function color($color-name, $color-variant:null) {
  @if $color-variant != null {
    @return map-get(map-get($colors,$color-name),$color-variant);
  } @else {
    @if type-of(map-get($colors,$color-name)) == 'map' {
      @return map-get($colors,'base');
    } @else {
      @return map-get($colors,$color-name);
    }
  }
}

但是当我把这个函数放在rgba里面时：

background: rgba(color(cyan), .5);

我得到一个错误

Error: argument `$color` of `rgba($color, $alpha)` must be a color

有没有办法在 sass rgba 函数中使用函数作为参数？ 也许我是盲人，但我无法用谷歌搜索答案。

Answer 1

根据我的理解，问题出在自定义函数返回的值上。

@else 条件的@if 部分中的以下代码行实际上不会根据您的设置返回任何内容。您应该首先根据作为参数传递的值获取颜色映射，然后从该映射中选择基本颜色值。

@return map-get($colors,base);

所以，正确的@return 语句应该像下面的代码块一样。

@function color($color-name, $color-variant:null) {
  @if $color-variant != null {
    @return map-get(map-get($colors,$color-name),$color-variant);
  } @else {
    @if type-of(map-get($colors,$color-name)) == 'map' {
      @return map-get(map-get($colors,$color-name),base); /* your problem was here */
    } @else {
      @return map-get($colors,$color-name);
    }
  }
}

CodePen Demo（a 标签的颜色和背景使用函数的输出设置）。