css - SASS 与波旁混合作为背景

Question

我已经包含了波旁威士忌，并尝试使用@include background如下所示创建背景：

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

但是编译时会创建两个 CSS 背景语句，如下所示：

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

为什么会发生这种情况，我该如何解决？

Answer 1

我使用了以下自定义 mixin

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