Question

我有这2个mixins，唯一的区别是图像文件位置。这样做有更清洁，更好的方法吗？我希望能够只包含我需要的mixin，而不必覆盖我的.scss文件中的文件位置。

  @mixin retinize($file, $type, $width, $height) {
      background-image: url('../img/' + $file + '.' + $type);

      @media #{$is-hidpi} {
        & {
          background-image: url('../img/' + $file + '-ret.' + $type);
          -webkit-background-size: $width $height;
             -moz-background-size: $width $height;
                  background-size: $width $height;
        }
      }
    }

    @mixin retinize-docroot($file, $type, $width, $height) {
      background-image: url('/DocRoot/1/Img/' + $file + '.' + $type);

      @media #{$is-hidpi} {
        & {
          background-image: url('/DocRoot/1/Img/' + $file + '-ret.' + $type);
          -webkit-background-size: $width $height;
             -moz-background-size: $width $height;
                  background-size: $width $height;
        }
      }
    }

Answer 1

我会做以下事情：

@mixin retinize($file, $type, $width, $height, $docroot: false) {
  $url: if($docroot == false, '../img/', '/DocRoot/1/Img/');
  $url: $url + $file + '.';
  $low: $url + $type;
  $high: $url + '-ret.' + type;

  background-image: url('#{$low}');

  @media #{$is-hidpi} {
    background-image: url('#{$high}');
    -webkit-background-size: $width $height;
    -moz-background-size: $width $height;
    background-size: $width $height;
  }
}

我在这里做的是我添加一个新的参数来判断图像是否在docroot并使用内联if函数来编写正确的前缀。然后我构建共享URL的其余部分并创建低/高变量。最后，我包括媒体查询。我不包括嵌套的&作为媒体查询冒出来并包装他们所在的选择器;如果你需要它来加倍选择器，请随意添加它。我还建议删除-moz前缀，因为Firefox 3.6和-webkit前缀后不需要它除非您需要Android 2.3的一流支持（检查Can I Use以获得浏览器支持）

Answer 2

Snugug你是对的，但我删除了$url并将其添加到'.'的下一行，我做了更改$low。您的方法是在视网膜图像上添加额外的.。非常感谢你的帮助。

@mixin retinize($file, $type, $width, $height, $docroot: false) {
  $url: if($docroot == false, '../img/', '/DocRoot/1/Img/');
  $url: $url + $file;
  $low: $url + '.' + $type;
  $high: $url + '-ret.' + $type;

  background-image: url('#{$low}');

  @media #{$is-hidpi} {
    background-image: url('#{$high}');
    -webkit-background-size: $width $height;
    -moz-background-size: $width $height;
    background-size: $width $height;
  }
}

Sass mixins与不同的图像文件位置相同

2 个答案: