CSS Sass 背景图片混合

Sass Background Image mixin

提问by simplethemes

I'm kind of new to Sass, but I'm attempting to create a workflow for myself. I generate "color packs" for my theme designs and need to specify the following variables for my mixin. Is there a better way to do this?:

我对 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;
}

I'm inserting like so:

我是这样插入的：

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

which yields this:

这产生了：

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

I'd prefer to use CSS shorthand when possible, but I ran into errors with the output. I'd appreciate any expert advice if this is not the best way to do it.

如果可能，我更喜欢使用 CSS 速记，但我遇到了输出错误。如果这不是最好的方法，我将不胜感激。

回答by Jannis

depending on how your packs are structured/applied you might be able to use a loop to generate a bunch of generic styles. See the documentation here: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#id35

根据您的包的结构/应用方式，您可能能够使用循环来生成一堆通用样式。请参阅此处的文档：http: //sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#id35

Do you really need 3 separate components to get your image url? wouldn't: $imgand then setting that to /folder/img.extbe far easier?

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

Also, you don't need the #{}for repeat by the way.

另外，#{}顺便说一下，您不需要for repeat 。

I hope this is what you're after… the question is not very specific in terms of what you need the outcome to actually be.

我希望这就是您所追求的……就您实际需要的结果而言，这个问题并不是很具体。

Cheers, Jannis

干杯，詹尼斯

Update:

更新：

Okay, I see you've updated your question (thanks for that). I believe this could be a little better for general use:

好的，我看到你更新了你的问题（谢谢）。我相信这对于一般用途可能会好一点：

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

This will then output:

这将输出：

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

Or you can use the shorthand version:

或者您可以使用速记版本：

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

Which will generate:

这将生成：

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

Lastly if you want to specify your base path to your image directory separatelyyou can do the following:

最后，如果您想单独指定图像目录的基本路径，您可以执行以下操作：

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

This will then generate:

这将生成：

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

Is this what you needed?

这是你需要的吗？

If not feel free to update the question or reply/comment.

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

回答by raduken

some other sample:

其他一些示例：

path to the image:

图片路径：

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

color

颜色

$black: #000000;

creating the 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 ;
} 

using the mixing:

使用混合：

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

result:

结果：

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

回答by Pranav Shah

take one $var and it will make it easier for you.

拿一个 $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

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-kurtheitroad {
background: url('/images/avatars/kurtheitroad.png') no-repeat;
}