Stringhe di codifica URL o Base64 in Bussola/SASS

Question

C'è un modo per codificare URL o Base64 in una stringa in Bussola o SASS?

Voglio creare un'immagine di sfondo linea SVG, in questo modo:

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; 

(La ragione per la creazione di esso in linea è che alcuni dei valori del SVG bisogno di venire da variabili Sass.)

Il problema è che gli URL di dati CSS dovrebbero essere codificati tramite URL o codificati Base64. Se non lo sono, allora strumenti come il compressore YUI mangle them.

So che è possibile encode an image from an external file, ma ho bisogno di codificare una stringa. qualcuno conosce un modo per fare questo?

Answer 1

non sono sicuro se c'è un modo più semplice, così ho scritto una funzione SASS personalizzato:

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 

file 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 quindi è disponibile come funzione nella bussola: https://github.com/chriseppstein/compass/commit/5a015b3824f280af56f1265bf8c3a7c64a252621#L2R4