首页 文章

SASS Mixin语法'$'前缀[复制]

提问于
浏览 次
0

这个问题在这里已有答案：

我正在研究一个简单的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);

我遇到的问题是我只是传递图像的名称（在这种情况下只是'logo'）在background-image网址中使用，但是我需要在@include sprite mixin前加上一个这样的美元......

@include sprite($logo);

所以我真正需要知道的是我如何在Sass中格式化这一行，以便它在$ svg变量中使用$前缀来传递它 . 这是需要调整@include sprite（$＃{$ png}）的行;谢谢 .

sass mixins

1 回答

  • 0

    我'm a bit confused, why don'你刚申请 @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);
}

    OUTPUT

    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

    回复于

相关问题