时间戳

首页 > 解决方案 > 编译后的 CSS 中的 SASS 混合输出函数

css - 编译后的 CSS 中的 SASS 混合输出函数

问题描述

查看时我编译的 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.

标签： csssassmixins

解决方案

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

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

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

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

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

推荐阅读