9

有没有办法在 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 压缩器之类的工具会破坏它们。

我知道您可以对来自外部文件的图像进行编码，但我需要对字符串进行编码。有谁知道这样做的方法？

4

2 回答 2

23

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

配置.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;
于 2013-03-16T22:42:59.267 回答
5

它也可以作为指南针中的一个功能使用：https ://github.com/chriseppstein/compass/commit/5a015b3824f280af56f1265bf8c3a7c64a252621#L2R4

于 2013-06-22T21:08:09.317 回答