Łańcuchy kodowania URL- lub Base64 w kompasie/SASS

Question

Czy istnieje sposób kodowania adresu URL lub kodu Base64 w kompasie lub SASS?

Chcę utworzyć tło inline SVG obraz tak:

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; 

(Powodem tworzenia to inline jest to, że niektóre z wartościami SVG potrzebują pochodzić od zmiennych Sass.)

Problem polega na tym, że adresy URL danych CSS mają być zakodowane za pomocą adresów URL lub zakodowane w Base64. Jeśli nie, to narzędzia takie jak kompresor YUI mangle them.

Wiem, że można encode an image from an external file, ale muszę zakodować ciąg znaków. Czy ktoś wie, jak to zrobić?

Answer 1

Nie jestem pewien, czy istnieje prostszy sposób, więc napisałem niestandardową Sass funkcję:

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 

Plik 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

Al więc jest dostępny jako funkcja kompasu: https://github.com/chriseppstein/compass/commit/5a015b3824f280af56f1265bf8c3a7c64a252621#L2R4