我想悬停图标到白色与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的颜色，它的默认值是黑色。我还想用一个变量来改变悬停颜色。在内容svg中使用了"fill='%23#{$cblack}“

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;
    }
}

检查this snippet以查看它的实际效果。

以下是编译后的示例：

​

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

​