Question

我刚刚写了一个mixin，应该为视网膜显示器显示一个@ 2x图标版本。

首先，这是一个图标名称的示例：

      images/icon/close-black.png
      images/icon/close-black@2x.png

这是mixin：

     @mixin background-image-retina($type, $file, $color, $ext) {
           background-image: url('src/assets/images/' + $type + '/' + $file + '-' + $color + '.' + $ext);
           @media only screen and (-webkit-min-device-pixel-ratio: 2),
              only screen and (-moz-min-device-pixel-ratio: 2),
              only screen and (-o-min-device-pixel-ratio: 2/1),
              only screen and (min-device-pixel-ratio: 2),
              only screen and (min-resolution: 192dpi),
              only screen and (min-resolution: 2dppx){
              & {
                  background-image: url('src/assets/images/' + $type + '/' + $file + '-' + $color + '@2x.' + $type);
              }
           }                                                                          
      }

所以我打电话给我的混音：

    @include background-image-retina(icon, close, black, png);

结果就是问题所在：

    background-image: url(src/assets/images/icon/close-#000.png);

我的问题：

有没有人知道如何指定图标颜色而不用实际的十六进制颜色进行编译？

感谢您的帮助！

一个/ W

[编辑：解决方案]

要避免在mixin中进行类似颜色的名称编辑，只需在其周围添加引号即可。

      black    ->    #000
      "black"  ->    black

Answer 1

我想你可能有旧版的SASS。字符串中的周围颜色很好，但这是不必要的。此外，如果您插入值，即使在旧版本中，我认为它将解决您的问题;加上它更短，更容易遵循。我和你两个人sassmeister。在较新版本的SASS中比较插值和非插值变量。但这基本上就是我所说的：

@mixin background-image-retina($type, $file, $color, $ext) {
  background-image: url('src/assets/images/#{$type}/#{$file}-#{$color}.#{$ext}');

  @media only screen and (whatevs) {
      & {
          background-image: url('src/assets/images/#{$type}/#{$file}-#{$color}@2x.#{$type}');
      }
  }                                                                          
}

.hey { @include background-image-retina(icon, close, black, png); }

Sass mixin颜色名称编译问题

1 个答案: