Question

我已添加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;

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

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

SASS与波旁威士忌mixin为背景

1 个答案: