pseudo classe mixin css en utilisant une variable

Question

Je veux faire le travail de code suivant:

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

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

Ce qui est ici mon meilleur plan?

EDIT: En fait, je peux faire ce mal de toute façon. Ce que je veux, c'est un style pour chaque marque où la seule chose qui change est l'image. Ce CSS est compilé par Gulp donc ne peut pas injecter des variables PHP.

Answer 1

Je comprends, vous utilisez SASS :) Si oui, vous pouvez le faire comme ceci:

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

Answer 2

Sur la base de votre commentaire Je suppose que vous travaillez avec Sass ici, donc je l'ai venir avec ce qui suit. Vous pouvez utiliser un mixin, qui prend une variable (dans ce numéro d'identification cas), qui renvoie une étiquette :before{} sur l'élément que vous appliquez à:

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

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

Cela se traduira par:

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

Vous pouvez jouer avec le code ici: http://codepen.io/offinga/pen/aJbeJM