Chuỗi mã hóa URL hoặc Base64 trong La bàn/SASS

Question

Có cách nào để mã hóa URL hoặc Base64 một chuỗi trong La bàn hoặc SASS không?

Tôi muốn tạo ra một hình ảnh nền inline SVG, như thế này:

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; 

(Lý do cho việc tạo ra nó inline là một số giá trị của SVG cần phải xuất phát từ biến Sass.)

Vấn đề là, URL dữ liệu CSS được cho là mã hóa URL hoặc mã hóa Base64. Nếu không, thì các công cụ như máy nén YUI mangle them.

Tôi biết rằng bạn có thể encode an image from an external file, nhưng tôi cần mã hóa một chuỗi. Có ai biết cách để làm điều này?

Answer 1

Tôi không chắc chắn nếu có một cách dễ dàng hơn, vì vậy tôi đã viết một tùy chỉnh Sass chức năng:

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 

Tệp 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 do đó, nó có sẵn dưới dạng hàm trong la bàn: https://github.com/chriseppstein/compass/commit/5a015b3824f280af56f1265bf8c3a7c64a252621#L2R4