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 { 
    ... 
}