2013-03-16 7 views
9

C'è un modo per codificare URL o Base64 in una stringa in Bussola o SASS?Stringhe di codifica URL o Base64 in Bussola/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?

+0

Preferirei farlo tutto in CSS/SASS, non JavaScript. –

risposta

22

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; 
+3

se qualcuno lo vuole includere in 'grunt-contrib-sass' gruntfile come me, metti' base64-encode.rb' nel tuo progetto e aggiungi 'require: './Path/to/base64-encode.rb'' al tuo 'file grunt'. '. /' è richiesto a 'grunt' per trovare il tuo plugin relativo al percorso del progetto invece della posizione delle gemme di sistema. –

+0

potresti spiegarmi un po 'di più, perché ho provato questo, ma fallisce – Johansrk

+0

newermind, ho solo bisogno del. – Johansrk

4
+2

Con 'inline-image', si fornisce un percorso a un file, la funzione legge il file e ne codifica il contenuto.La domanda è di fornire i dati da codificare direttamente a una funzione. –

+3

nota che 'inline-image' non dà la possibilità di usare le variabili in un file SVG, qualcosa che le persone che finiscono in questo numero potrebbero aver cercato – qkrijger