Sass - 混合设置2分层背景

我一直在试图为我在我的网站上重复的东西创建一个mixin，但它不起作用。Sass - 混合设置2分层背景

我想要创建的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 
}

你的帮助是值得欢迎...

来源

2014-09-24 Azuk

除“不起作用”之外，该问题的更多细节将会有所帮助。是[插入]（http://sass-lang.com/documentation/file.SASS_REFERENCE.html#interpolation_）的问题？也就是说，以正确的顺序排列冗长的参数列表将会是一件苦差事。使用一些[默认值]（http://sass-lang.com/documentation/file.SASS_REFERENCE.html#mixin-arguments）并用[关键字参数]调用mixin（http://sass-lang.com/documentation /file.SASS_REFERENCE.html#keyword_arguments_2）将有所帮助。 – steveax 2014-09-24 09:08:52

仔细观察编写的vs手写。图像的路径是不同的。投票结束这一个作为一个简单的印刷错误。 – cimmanon 2014-09-24 13:40:10

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

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

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

来源

2014-09-25 08:45:19

我们更喜欢关闭“简单印刷”问题，而不是回答它们，因为它们对未来的访问者无用。 – cimmanon 2014-09-25 12:04:42

Sass - 混合设置2分层背景

回答

相关问题