Syntaxe SASS Mixin pour le préfixe '$'

Question

Je travaille sur un mixin simple à utiliser avec Grunt Spritesmith. Voici ce que j'ai écrit jusqu'à présent ...

@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}); 
    } 
} 

Et je l'utiliser comme ça ...

@include svg("logo", 50, 100); 

La question que je vais avoir est que je passe en seulement le nom de l'image (dans ce cas seulement « logo ») à utiliser dans l'URL image d'arrière-plan, mais je dois le préfixe mixin sprite @include avec un dollar comme si ...

@include sprite($logo); 

alors tout ce que j'ai besoin de savoir est vraiment comment je formaterais cette ligne dans Sass afin que je t crache la variable $ svg passée avec un préfixe $. C'est la ligne qui a besoin de peaufiner @include sprite ($ # {$ png}); Merci.

Answer 1

Je suis un peu confus, pourquoi ne vous appliquez tout simplement pas @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); 
} 

SORTIE

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); 
    ... 

} 

Un exemple: http://sassmeister.com/gist/cdccd858780acbf2d144