svg - Compass/SASS中的URL或Base64编码的字符串

Question

有没有办法在Compass或SASS中对URL进行URL或Base64编码？

我想创建一个嵌入式SVG背景图像，如下所示:

background: transparent url('data:image/svg+xml; charset=utf-8,'
    + '<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">'
    + '</svg>') 0 0 no-repeat;

(内联创建它的原因是，某些SVG的值需要来自SASS变量。)

问题是，CSS数据URL应该被URL编码或Base64编码。如果不是，则使用诸如YUI压缩器mangle them之类的工具。

我知道您可以encode an image from an external file，但是我需要对字符串进行编码。有人知道这样做的方法吗？

Answer 1

我不确定是否有更简单的方法，所以我编写了一个自定义SASS函数:

config.rb:

require File.join(File.dirname(__FILE__), 'base64-encode.rb')

base64-encode.rb:

require 'sass'
require 'base64'

module Sass::Script::Functions
    def base64Encode(string)
        assert_type string, :String
        Sass::Script::String.new(Base64.strict_encode64(string.value))
    end
    declare :base64Encode, :args => [:string]
end

SCSS文件:

background: transparent url('data:image/svg+xml;charset=utf-8;base64,'
    + base64Encode('<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">'
    + '</svg>')) 0 0 no-repeat;