Sass - 混合设置 2 分层背景答案

【问题标题】：Sass - mixing setting 2 layered backgroundsSass - 混合设置 2 分层背景
【发布时间】：2014-09-25 16:45:19
【问题描述】：

我一直在尝试为我在我的网站上一直重复的内容创建一个 mixin，但它不起作用。

我要创建的 mixin 生成一个带有两个图像的图标，两个图像都用作背景图像并被覆盖。基本上，您应该使用它作为结果，一个带有应用为背景图像的图像的圆形背景，以及使用 css 背景图像放置的实际图标。

这是我做的 mixin。

@mixin coloredIcons($width,$height,$radius,$nameImgA,$nameImgB,$extensionA,$extensionB,$bg-size1,$bg-size2){
       width: $width;
       height:$height;
       background:url("../imgs/#{$nameImgA}.#{$extensionA}") no-repeat center center,
       url("../imgs/#{$nameImgB}.#{$extensionB}") center center;
       -moz-border-radius: $radius;
       -webkit-border-radius:$radius;
       -o-border-radius:$radius;
       border-radius: $radius;
       background-size: $bg-size1 $bg-size1, $bg-size2;
};

这是我将其包含在我的红色课程中的方式。

.red{
 @include coloredIcons(200px,200px,50%,"idea","bg_icon_red","png","jpg",200px,"cover");
 }

显然它不起作用，还没有找到修复它的方法。然而，这里是纯粹的 css 版本，它就像一个魅力。

.red{
// @include coloredIcons(200px,200px,50%,"idea","bg_icon_red","png","jpg",200px,"cover");
 width: 200px;
 height: 200px;
 background:url('../imgs/icons/idea_grey.png') no-repeat center center,
 url("../imgs/bg_icon_red.jpg") center center;
 -moz-border-radius: 50%;
 -webkit-border-radius:50%;
 -o-border-radius:50%;
 border-radius: 50%;
background-size: 200px 200px,cover
}

欢迎您的帮助...

【问题讨论】：

除了“不起作用”之外的问题的更多细节会有所帮助。 interpolation 是问题吗？也就是说，以正确的顺序获取一长串参数将是一件苦差事。使用一些 default values 并使用 keyword arguments 调用 mixin 会有所帮助。
仔细观察编译与手写。图像的路径不同。投票关闭这个只是一个简单的印刷错误。

标签： css sass mixins

【解决方案1】：

正如 cimmanon 提到的，检查您的图像路径并删除最后一个参数上的双引号。

 @include coloredIcons(200px,200px,50%,"idea_grey","bg_icon_red","png","jpg",200px,cover);

生成与纯 css 版本相同的输出。

【讨论】：

我们更愿意关闭“简单的印刷”问题而不是回答它们，因为它们对未来的访问者没有用处。