Question

我想让以下代码工作：

@mixin wrapper-bg($make-id) {

}
.wrapper-bg:before {
  ...
  background-image: url('/images/makes/{$make-id}.png');
  ...
}

我最好的计划是什么？

编辑：实际上我无论如何都可能做错了。我想要的是每个品牌的风格，唯一改变的是图像。这个css是由gulp编译的，所以不能注入任何php变量。

Answer 1

我明白，你正在使用SASS :)如果是这样，你可以这样做：

@mixin wrapper-bg($image-name) {
 &::before {
   background-image: url(/images/makes/#{$image-name}.png);
 } 
}
.wrapper-bg {
  @include wrapper-bg(image-name);
}

Answer 2

根据你的评论，我假设你在这里与Sass合作，所以我想出了以下内容。你可以使用一个带有变量（在这种情况下是id）的mixin，它会在你应用它的元素上返回一个:before{}标签：

@mixin wrapper-bg ($id) {
    &:before {
        background-image: url("/images/makes/#{$id}.png");
    }
}

.wrapper-bg {
    @include wrapper-bg("test");
}

这将导致：

.wrapper-bg:before {
  background-image: url("/images/makes/test.png");
}

您可以在此处使用代码：http://codepen.io/offinga/pen/aJbeJM

使用变量的css伪类mixin

2 个答案: