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缩写，但是在输出时遇到了错误。如果这不是最好的方法，我会非常感激任何专家的建议。

- simplethemes

Answer 1

根据你的包的结构/应用方式，你可以使用循环来生成一堆通用样式。在此处查看文档：http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#id35

你真的需要三个单独的组件来获取你的图片URL吗？设置$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;
}

这符合你的需求吗？

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

- Jannis

---

如果你的SASS代码比只用CSS编写要长，那就没有意义了...唯一需要mixin的是URL部分，而不是其他部分。让你的mixin名称更短。 - vsync

Answer 2

以下是需要翻译的内容：

图片路径:

一些其他示例:

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

颜色

$black: #000000;

创建mixin：

@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 ;
} 

使用混合：

.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;
}

- raduken

---

嘿，对于像“right center”这样的背景位置，有什么评论或者使用方法吗？ - Sp0T

Answer 3

使用一个变量，这样会让你的工作更容易。

$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;
}

- Pranav Shah