Question

在以下SCSS中，我想在fg-color url属性中使用background-image变量。

$fg-color: #ff6464;

i.icon-back {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='%23ff6464'/></svg>");
}

此时变量的值在SVG字符串中简单重复，如下所示：

fill='%23ff6464'

我希望每当更新fg-color变量时都会自动更新。

我该怎么做？

更新：

此输入SCSS：

i.icon-back {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='$fg-color'/></svg>");
}

输出此CSS：

i.icon-back {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='$fg-color'/></svg>");
}

......它完全相同 - 不处理变量。

注：

我已经回顾了这些看似相似的问题，但不一样：

Answer 1

首先，创建一个SASS功能。这个（ab）使用字符串插值将颜色转换为字符串，然后删除第一个字符（应始终为＆＃39; #＆＃39;），并放置＆＃39; %23＆＃39;代替它（URL编码形式为＆＃39; #＆＃39;）。

@function url-friendly-colour($colour) {
    @return '%23' + str-slice('#{$colour}', 2, -1)
}

然后使用该函数 - 但是为了使它在字符串中起作用，必须使用#{} 进行插值

i.icon-back {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='#{url-friendly-colour($fg-color)}'/></svg>");
}

当然，使用这种方法的警告是，它不适用于颜色由颜色名称而不是十六进制颜色指定。

E.g。 #f00有效，但red不会。

Answer 2

不是您的问题的答案，而是在许多情况下实现类似结果的另一种方法（想想简单的单色图标）。你可以像这样使用CSS mask-image：

$.fn.fileUploader = function(filesToUpload) {
    this.closest(".files").change(function(evt) {
                        var index;
                        for (var i = 0; i < evt.target.files.length; i++) {
                            index = filesToUpload.indexOf(evt.target.files[i]);
                            if (index > -1) {
                                filesToUpload.splice(index, 1);
                            }
                        }
                        for (i = 0; i < evt.target.files.length; i++) {
                            var filename = evt.target.files[i].name;
                            var valid_extensions = /(\.pdf|\.doc|\.docx)$/i;                            
                            if (valid_extensions.test(filename)) {
                                for (var i = 0; i < evt.target.files.length; i++) {
                                    filesToUpload.push(evt.target.files[i]);
                                };
                                var output = [];
                                for (var i = 0, f; f = evt.target.files[i]; i++) {
                                    var removeLink = "<a class=\"removeFile\" href=\"#\" data-fileid=\""+ i + "\">Remove</a>";
                                    output.push("<li><strong>", escape(f.name),"</strong> - ", removeLink,"</li> ");
                                }
                                $(this).children(".fileList").append(output.join(""));
                            } else {
                                alert('Invalid File');
                                return false;
                            }
                        }
                    });
};

var filesToUpload = [];
$(document).on("click", ".removeFile", function(e) {
    e.preventDefault();
    var fileName = $(this).parent().children("strong").text();
    // loop through the files array and check if the name of that file matches
    // FileName
    // and get the index of the match
    for (i = 0; i < filesToUpload.length; ++i) {
        if (filesToUpload[i].name == fileName) {
            // console.log("match at: " + i);
            // remove the one element at the index where we get a match
            filesToUpload.splice(i, 1);
        }
    }
    // console.log(filesToUpload);
    // remove the <li> element of the removed file from the page DOM
    $(this).parent().remove();
});

$("#files1").fileUploader(filesToUpload);
$("#files2").fileUploader(filesToUpload);

$("#uploadBtn").click(function(e) {
    e.preventDefault();
});

在撰写本文时，

Browser support for CSS masks缺少Edge / IE。

Answer 3

更好的解决方案

// SASS 
$nt-link-color
.circle{
  background: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' style='fill:#{toRGB($nt-link-color)};' width='24' height='28' viewBox='0 0 24 28'><path d='M24 14c0 6.625-5.375 12-12 12s-12-5.375-12-12 5.375-12 12-12 12 5.375 12 12z'></path></svg>")  no-repeat;
}

// FUNCTION
@function toRGB ($color) {
  @return "rgb(" + red($color) + ", " + green($color) + ", " + blue($color)+ ")";
}

具有SVG图像数据URI的背景图像中的SCSS变量

3 个答案: