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

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

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

@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标记的颜色和背景。）

Sass：在rgba中作为颜色起作用

1 个答案: