Sass mixin 颜色名称编译问题答案

【问题标题】：Sass mixin color-name compiling issueSass mixin 颜色名称编译问题
【发布时间】：2017-07-30 04:19:11
【问题描述】：

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

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

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

这是混合：

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

所以我称我的 mixin 为：

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

结果在这里，问题就在这里：

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

我的问题：

有谁知道如何指定图标颜色而不用实际的 HEX 颜色编译？

感谢您的帮助！

A/W

[编辑：找到解决方案]

为避免在您的 mixin 中编译类似颜色的名称，只需在其周围添加引号即可。

      black    ->    #000
      "black"  ->    black

【问题讨论】：

好的，我想我已经找到了解决方案。顺便说一句，很简单...为了避免在您的 mixin 中编译类似颜色的名称，只需在其周围添加引号。我将编辑我的问题给谁需要答案。

标签： colors compilation sass

【解决方案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); }

【讨论】：