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 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%);
}

编译后的CSS中的SASS mixin输出功能

2 个答案: