SASS CSS地圖存儲圖像尺寸

Question

我試圖存儲圖像和尺寸的青菜，現在我可以加載所有，但我想更具體，並能夠在我的.logo類加載不同的圖像

像例如，定義類似twitter或google的圖片。

$logos: (
    twitter: (width:200px, height:100px,background-image: url('twitter.png')), 
    google: (width:600px, height:200px,background-image: url('google.png')) 

); 

     @each $social, $icon in $logos { 
       .logo { 
        width: map-get($icon, width); 
        height: map-get($icon, height); 
        background-image:map-get($icon,background-image); 
       } 
     } 

輸出：

.logo { 
    width: 200px; 
    height: 100px; 
    background-image: url("twitter.png"); 
} 

.logo { 
    width: 600px; 
    height: 200px; 
    background-image: url("google.png"); 
} 

輸出我想：

// Twitter的標誌，如果我定義了上面。

.logo { 
    width: 200px; 
    height: 100px; 
    background-image: url("twitter.png"); 
} 

//谷歌的標誌，如果我定義了上面太

.logo { 
    width: 600px; 
    height: 200px; 
    background-image: url("google.png"); 
} 

Answer 1

編輯：如果你只是想補充以上您對.logo代碼 評論只是添加/*#{$social}*/上述.logo您@each-loop。 輸出示例：

/*twitter*/ 
.logo { 
    width: 200px; 
    height: 100px; 
    background-image: url("twitter.png"); 
} 

你想是這樣的編譯？

.logo.twitter{---} 

，如果你換一個#{}內您的變量，你可以使用它！

例子：

$logos: (
    twitter: (width:200px, height:100px,background-image: url('twitter.png')), 
    google: (width:600px, height:200px,background-image: url('google.png')) 

); 
@each $social, $icon in $logos { 

    .logo.#{$social}{ 
    width: map-get($icon, width); 
    height: map-get($icon, height); 
    background-image:map-get($icon,background-image); 
    } 
} 

輸出

.logo.twitter { 
    width: 200px; 
    height: 100px; 
    background-image: url("twitter.png"); 
} 

.logo.google { 
    width: 600px; 
    height: 200px; 
    background-image: url("google.png"); 
} 

你也可以只使用您$social變量，只是刪除.logo在@each循環，你會得到

.twitter { 
... 
} 

.google { 
    ... 
}