SASS與波旁混入的背景

Question

我已經包括Bourbon，我試圖創建一個使用@include background背景，如下圖所示：

@include background(url("images/head-icon.png") no-repeat 10px 10px); 

但是在編譯時這將創建兩個CSS背景statments如下圖所示：

background: url("images/head-icon.png") no-repeat 10px 10px; 
    background: url("images/head-icon.png") no-repeat 10px 10px; 

爲什麼會發生這種情況，我該如何解決？

Answer 1

我用下面的自定義混入

// folder,filename,extension,repeat,x-pos,y-pos 
@mixin background ($img:file, $type:png, $repeat:no-repeat, $x:0, $y:0) { 
    background-image: url(/images/#{$img}.#{$type}); 
    background-repeat: #{$repeat}; 
    background-position: #{$x}px #{$y}px; 
} 

然後

@include background(head-icon,png, no-repeat, 10, 10);