CSSの擬似クラスのミックスインを使用して変数

Question

私は次のコードで作業したい

：いただきました私の最高の計画ここ

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

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

を？

EDIT： 実際に私はこの問題をどうにかしている可能性があります。私が欲しいのは、変更される唯一のものが画像である場合、それぞれのメイクのスタイルです。この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

私はあなたがここにサスで作業していると仮定していますので、私はしました次のものを思いついてください。あなたはそれを適用する要素に:before{}タグを返します（この場合のIDで）変数を取るミックスインを、使用することができます。

@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