'$' 前缀的 SASS Mixin 语法 [重复]

Question

我正在开发一个与 Grunt Spritesmith 结合使用的简单 mixin。这是我到目前为止写的内容...

@mixin svg($svg, $height, $width) {
    background-image:url(../../images/svg/#{$svg}.svg);
    background-repeat:no-repeat;
    display:block;
    height:$height + px;
    width:$width + px;
    .no-svg & {
        @include sprite($#{$png});
    }
}   

我会这样使用它...

@include svg("logo", 50, 100);

我遇到的问题是我只传递了图像的名称（在这种情况下只是“徽标”）以在背景图像 url 中使用，但是我需要在 @include 精灵前面加上前缀像这样混入一美元......

@include sprite($logo);

所以我真正需要知道的是如何在 Sass 中格式化这一行，以便它吐出传入的带有 $ 前缀的 $svg 变量。这是需要调整的行 @include sprite($#{$png});谢谢。

Answer 1

我有点迷茫，你为什么不直接申请@include sprite(#{$svg})

@mixin svg($svg, $height, $width) {
    background-image:url(../../images/svg/#{$svg}.svg);
    background-repeat:no-repeat;
    display:block;
    height:$height + px;
    width:$width + px;
    .no-svg & {
        @include sprite(#{$svg});
    }
}

@mixin sprite($value) {
  background-image:url(../../images/png/#{$value}.png);
  ...
}

div {
  @include svg("logo", 50, 100);
}

输出

div {
  background-image: url(../../images/svg/logo.svg);
  background-repeat: no-repeat;
  display: block;
  height: 50px;
  width: 100px;
}

.no-svg div {
  background-image: url(../../images/png/logo.png);
  ...

}

一个例子：http://sassmeister.com/gist/cdccd858780acbf2d144