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分層背景

回答

相關問題