SASS mixin 在编译后输出函数 CSS

Question

我编译的 CSS 在查看时有一个 SASS 函数从未编译过。这大概是由我用来自动生成类的 mixin 引起的。我不知道如何解决它。

SASS代码：

$rsColors: (
    main: (
        base: #333030,
        lighter:#827a7a,
        light:#5a5555,
        dark:#0c0b0b,
        darker:#000000,
        red: #211010,
        accent:#999595,
        border: #666666
    ),
    link: (
        base: #c42727,
        lighter:#eb9999,
        light:#de5959,
        dark:#841a1a,
        darker:#440e0e,
        hover:#841a1a,
        bg:rgba(80, 80, 80, 0.8),
        bgHover: #cccccc
    )
}
@mixin modifiers($map, $attribute, $prefix: '-', $hover: 'false', $separator: '-',$base: 'base', $type: 'darken', $perc: '15%') {
  @each $key, $value in $map {
    &#{if($key != $base, #{$prefix}#{$key}, '')} {
      @if type-of($value) == 'map' {
        @include modifiers($value, $attribute, $separator, $hover);
      }
      @else {
        #{$attribute}: $value;
        @if $hover == 'true' {
          &:hover {
            $function: get-function($type);
            #{$attribute}: call($function,$value,$perc);
          }
        }
      }
    }
  }
}

.rsBg {
  @include modifiers($rsColors, 'background', $hover: 'true');
}

已编译CSS（从 Firefox 检查器中的样式编辑器查看）：

...
.rsBg-yellow-700 {
  background: #b7791f;
}
.rsBg-yellow-700:hover {
  background: darken(#b7791f, 15%);
} 
...

如何修复已编译的 CSS 以使其正确呈现？我认为 mixin 是罪魁祸首，因为它正在输出我告诉它的内容。为什么在输出到 CSS 之前不编译？

预期输出：

...
.rsBg-yellow-700 {
  background: #b7791f;
}
.rsBg-yellow-700:hover {
  background: #915300; //assuming 15% darken
} 
...

**Edit**
After some testing I have found I needed to add the ```get-function()``` method to get ```call()``` to work. However, no matter what I try I can not get the ```$perc``` variable in such a way as to not throw a "not a number" error. I can hard code percentages and it will compile without errors.. but I'd rather not have to do that.

Answer 1

问题实际上来自您调用函数的方式，而不是 mixin。而不是：

#{$attribute}: unquote(#{$type}($value, #{unquote($perc)}));

您应该使用内置函数 call()，如下所示：

#{$attribute}: call($type, $value, $perc);

您还需要删除参数 $perc 的引号，否则您将收到诸如 $amount: "15%" is not a number for 'darken' 之类的错误。我尝试用 unquote() 删除它们，但它似乎不起作用。

Answer 2

这个问题的答案是在参数中使用 ''。特别是 $lightness 变量（从 @perc 变量更改而来）。一旦我删除了引号并将其挂在那里，所有内容都已编译并运行良好。

我删除了 $type 变量并将函数更改为 scale_color，因为它似乎更符合我的要求。我可能应该将参数变量更改为不同的名称，以免与 scale_color() 参数混淆。不过，这是另一天的任务。

请注意： 我接受@Arkellys 的回答，因为它让我走上了正确的答案之路，我对接受自己的回答感到很奇怪。我刚刚添加了这个答案，所以如果出现另一个答案可能会有所帮助。谢谢@Arkellys 的帮助！

最后的mixin

@mixin modifiers($map, $attribute, $prefix: '-', $hover: 'false', $separator: '-',$base: 'base', $lightness: -15%) {
  @each $key, $color in $map {
    &#{if($key != $base, #{$prefix}#{$key}, '')} {
      @if type-of($color) == 'map' {
        @include modifiers($color, $attribute, $separator, $hover);
      }
      @else {
        #{$attribute}: $color;
        @if $hover == 'true' {
          &:hover {
            #{$attribute}: scale_color($color,$lightness: $lightness);
          }
        }
      }
    }
  }
}

.rsBg {
  @include modifiers($rsColors, 'background', $hover: 'true', $lightness: -20%);
}

SASS mixin 在编译后输出函数 CSS

SASS mixin outputs function in compiled CSS

css

sass

mixins