Sass背景图片mixin

Question

我对Sass很陌生，但我试图为自己创建一个工作流程。我为我的主题设计生成“颜色包”，并且需要为我的mixin指定以下变量。有没有更好的办法做到这一点？：

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

我将像这样：

#nav { 
    @include background(style2,myimage,png,repeat-x,10,10); 
} 

这将产生这样的：

#nav { 
    background-image: url(./images/style2/myimage.png); 
    background-repeat: repeat-x; 
    background-position: 10px 10px; 
} 

我宁愿使用CSS缩写如果可能的话，但我遇到了输出错误。如果这不是最好的方式，我会很感激任何专家的建议。

Answer 1

取决于您的包的结构化/应用程序，您可能可以使用循环来生成一堆通用样式。看到这里的文档：http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#id35

你真的需要3个独立的组件来获取您的图片网址吗？不会：$img，然后将其设置为/folder/img.ext要容易得多吗？

此外，您不需要#{}重复的方式。

我希望这是你之后的事......这个问题并不是非常具体，你需要的结果是什么。

干杯， Jannis

更新：

好了，我看你已经更新了你的问题（感谢这一点）。我认为这可能是一个通用的好一点：

@mixin background($imgpath,$position:0 0,$repeat: no-repeat) { 
    background: { 
     image: url($imgpath); 
     position: $position; 
     repeat: $repeat; 
    } 
} 
.testing { 
    @include background('/my/img/path.png'); 
} 

这一操作将输出：

.testing { 
    background-image: url("/my/img/path.png"); 
    background-position: 0 0; 
    background-repeat: no-repeat; 
} 

或者您也可以使用简写版本：

@mixin backgroundShorthand($imgpath,$position:0 0,$repeat: no-repeat) { 
    background: transparent url(#{$imgpath}) $repeat $position; 
} 
.testing2 { 
    @include backgroundShorthand('/my/img/path.png'); 
} 

这将产生：

.testing2 { 
    background: transparent url(/my/img/path.png) no-repeat 0 0; 
} 

最后如果要指定图像目录的基本路径分别你可以做到以下几点：

$imagedir:'/static/images/'; // define the base path before the mixin 

@mixin backgroundShorthandWithExternalVar($filename,$position:0 0,$repeat: no-repeat) { 
    background: transparent url(#{$imagedir}#{$filename}) $repeat $position; 
} 
.testing3 { 
    @include backgroundShorthandWithExternalVar('filename.png'); 
} 

这会再生成：

.testing3 { 
    background: transparent url(/static/images/filename.png) no-repeat 0 0; 
} 

这是你需要什么？

如果不是随意更新问题或回复/评论。

Answer 2

取一个$ var，它会让你更容易。

$list: pranav shah 

=author-images 
    @each $author in $list 
.photo-#{$author} 
    background: image-url("avatars/#{$author}.png") no-repeat 

    .author-bio 
+author-images 

CSS

.author-bio .photo-adam { 
background: url('/images/avatars/adam.png') no-repeat; 
} 
.author-bio .photo-john { 
background: url('/images/avatars/john.png') no-repeat; 
} 
.author-bio .photo-wynn { 
background: url('/images/avatars/wynn.png') no-repeat; 
} 
.author-bio .photo-mason { 
background: url('/images/avatars/mason.png') no-repeat; 
} 
.author-bio .photo-kuroir { 
background: url('/images/avatars/kuroir.png') no-repeat; 
} 

Answer 3

一些其它样品：

路径图像：

$path--rel  : "../images"; 

颜色

使用混合

@mixin background-image($img, $background-position, $background-color) { 
    background-image: url('#{$path--rel}/#{$img}'); 
    background-repeat: no-repeat; 
    background-position: $background-position; 
    background-color: $background-color ; 
} 

：

$black: #000000; 

创建混入

.navbar-inverse { 
    @include background-image("header.png", right, $black); 
} 

结果：

.navbar-inverse { 
    background-image: url("../images/header.png"); 
    background-repeat: no-repeat; 
    background-position: right; 
    background-color: #000000; 
}