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压缩器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;

Answer 2

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

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

2 个答案: