URL-адрес или Base64-кодирование строк в Compass/SASS

есть ли способ URL-или Base64-кодировать строку в Compass или SASS?

Я хочу создать встроенное фоновое изображение 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;

(причина создания его inline заключается в том, что некоторые значения SVG должны исходить из переменных SASS.)

проблема в том, что URL-адреса данных CSS должны быть url-кодированы или base64-кодированы. Если это не так, то такие инструменты, как YUI compressor корежить их.

Я знаю, что вы можете закодировать изображение из внешнего файла, но мне нужно закодировать строку. Кто-нибудь знает, как это сделать?

9
compass-sass sass svg

2 ответов

Я не уверен, что есть более простой способ, поэтому я написал пользовательскую функцию SASS:

конфиг.rb:

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

в base64-кодирования.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;
23

также он доступен как функция в Компасе: https://github.com/chriseppstein/compass/commit/5a015b3824f280af56f1265bf8c3a7c64a252621#L2R4

5