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

Question

有没有办法在Compass或SASS中对字符串进行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压缩器这样的工具会破坏它们.

我知道你可以从外部文件编码图像,但我需要编码一个字符串.有谁知道这样做的方法？

Answer 1

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

config.rb:

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

基于64位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;

Answer 2

它也可以作为罗盘中的功能使用:https://github.com/chriseppstein/compass/commit/5a015b3824f280af56f1265bf8c3a7c64a252621#L2R4