'$'前綴的SASS Mixin語法

Question

我正在研究一個簡單的mixin與Grunt Spritesmith一起使用。這是我到目前爲止已經寫...

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

而且我會使用它像這樣...

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

我遇到的問題是，我傳遞的只是在背景圖像URL中使用的圖像的名稱（在這種情況下，只是「標誌」），但我需要像這樣一美元的前綴@include精靈混入......

@include sprite($logo); 

所以我只需要知道的是，我將如何在Sass中對這條線進行格式化，以便我t吐出$ svg變量傳入$前綴。這是需要調整@include sprite（$＃{$ png}）的行;謝謝。

Answer 1

我有點糊塗了，你爲什麼不只是適用@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); 
} 

輸出

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

} 

一個例子：http://sassmeister.com/gist/cdccd858780acbf2d144