css pseudo class mixin 使用变量

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，所以我想出了以下内容。您可以使用一个 mixin，它接受一个变量（在本例中为 id），它将 return 应用到的元素上的 :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 pseudo class mixin 使用变量

css pseudo class mixin using a variable

css

mixins

pseudo-element