SASS 与波旁混合作为背景

【问题标题】：SASS with bourbon mixin for backgroundsSASS 与波旁混合作为背景
【发布时间】：2013-09-21 22:03:33
【问题描述】：

我已包含Bourbon 并尝试使用@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;

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

【问题讨论】：

标签： css sass bourbon

【解决方案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);

【讨论】：