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 関数を作成しました。

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;
于 2013-03-16T22:42:59.267 に答える