0

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

萨斯代码： 

$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.
4

2 回答 2

2

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

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

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

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

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

于 2019-08-26T18:18:14.090 回答
1

这个问题的答案是''在论点中的使用。特别是$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%);
}
于 2019-08-27T03:22:34.863 回答