我想用sass(不带过滤器)将图标悬停在白色

Question

$cwhite : "fff";
$cblack : "000";
$icon-bg1 : "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58.045' height='58.044' viewBox='0 0 58.045 58.044'%3E%3Cpath id='usericon' d='M29.022.563A29.022,29.022,0,1,0,58.044,29.585,29.017,29.017,0,0,0,29.022.563Zm0,11.234a10.3,10.3,0,1,1-10.3,10.3A10.3,10.3,0,0,1,29.022,11.8Zm0,40.257a22.425,22.425,0,0,1-17.144-7.981,13.048,13.048,0,0,1,11.527-7,2.864,2.864,0,0,1,.831.129,15.494,15.494,0,0,0,4.786.807,15.435,15.435,0,0,0,4.786-.807,2.863,2.863,0,0,1,.831-.129,13.048,13.048,0,0,1,11.527,7A22.425,22.425,0,0,1,29.022,52.054Z' transform='translate(0 -0.563)' fill='%23#{$cblack}'/%3E%3C/svg%3E";
$icon-bg2 : "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='24' viewBox='0 0 30 24'%3E%3Cpath id='refreshicon' d='M15,3A11.967,11.967,0,0,0,7.207,5.875a1,1,0,1,0,1.3,1.52A10,10,0,0,1,24.951,14H22l4,6,4-6H26.949A12.012,12.012,0,0,0,15,3ZM4,10,0,16H3.051a11.993,11.993,0,0,0,19.742,8.125,1,1,0,1,0-1.3-1.52A10,10,0,0,1,5.049,16H8Z' transform='translate(0 -3)' fill='%23#{$cblack}' /%3E%3C/svg%3E";
@mixin sidbarIco($backImg , $fill-hover){
background-image:url($backImg);
// &:hover{
// what code?   
// }
}
.sidbar .ico{
display: block;
width:100px;
height:100px;
background-repeat: no-repeat;
transition: all .4s ease;
}
.sidbar .ico-1{@include sidbarIco($icon-bg1 , $cwhite)}
.sidbar .ico-2{@include sidbarIco($icon-bg2 , $cwhite)}

我有一个侧边栏，包含2个图标。我用svg表示图标。我用一个变量更改了svg的颜色，它的默认颜色是黑色。我还想用一个变量来改变悬停的颜色。使用"；fill＝"%23#｛$cblack｝"；在内容svg

Answer 1

一个想法是使用css mask image属性来处理作为背景图像插入的svg的颜色：

因此，首先用css有效的颜色变量替换您的颜色变量：

$cwhite : #fff;
$cblack : #000;

然后在sidbarIco函数中使用mask-image：

@mixin sidbarIco($backImg , $fill-hover){
background-color: $cblack;
-webkit-mask-image: url($backImg);
-webkit-mask-repeat: no-repeat;

&:hover{
background-color: $fill-hover;
}
}

请检查此片段以查看它的实际操作。

以下是已编译的示例：

.sidbar .ico {
display: block;
width: 100px;
height: 100px;
background-repeat: no-repeat;
transition: all .4s ease;
}
.sidbar .ico-1 {
background-color: #000;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58.045' height='58.044' viewBox='0 0 58.045 58.044'%3E%3Cpath id='usericon' d='M29.022.563A29.022,29.022,0,1,0,58.044,29.585,29.017,29.017,0,0,0,29.022.563Zm0,11.234a10.3,10.3,0,1,1-10.3,10.3A10.3,10.3,0,0,1,29.022,11.8Zm0,40.257a22.425,22.425,0,0,1-17.144-7.981,13.048,13.048,0,0,1,11.527-7,2.864,2.864,0,0,1,.831.129,15.494,15.494,0,0,0,4.786.807,15.435,15.435,0,0,0,4.786-.807,2.863,2.863,0,0,1,.831-.129,13.048,13.048,0,0,1,11.527,7A22.425,22.425,0,0,1,29.022,52.054Z' transform='translate(0 -0.563)' /%3E%3C/svg%3E");
-webkit-mask-repeat: no-repeat;
}
.sidbar .ico-1:hover {
background-color: #fff;
}
.sidbar .ico-2 {
background-color: #000;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='24' viewBox='0 0 30 24'%3E%3Cpath id='refreshicon' d='M15,3A11.967,11.967,0,0,0,7.207,5.875a1,1,0,1,0,1.3,1.52A10,10,0,0,1,24.951,14H22l4,6,4-6H26.949A12.012,12.012,0,0,0,15,3ZM4,10,0,16H3.051a11.993,11.993,0,0,0,19.742,8.125,1,1,0,1,0-1.3-1.52A10,10,0,0,1,5.049,16H8Z' transform='translate(0 -3)' /%3E%3C/svg%3E");
-webkit-mask-repeat: no-repeat;
}
.sidbar .ico-2:hover {
background-color: #fff;
}

<ul class='sidbar'>
<li class='ico ico-1'></li>
<li class='ico ico-2'></li>
</ul>