Question

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

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

我遇到的问题是，我只是传递了图片的名称（在这种情况下只是＆＃39;徽标＆＃39;），以便在背景图片网址中使用，但是那么我需要在@include sprite mixin前加一个这样的美元...

@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

'$'前缀的SASS Mixin语法

1 个答案: