Compass/SASS의 URL- 또는 Base64- 인 코드 문자열

Compass 또는 SASS에 문자열을 Base64- 인코딩하거나 URL을 인코딩 할 수 있습니까?Compass/SASS의 URL- 또는 Base64- 인 코드 문자열

나는 다음과 같이 인라인 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;

(가 인라인 SVG의 일부 값이 SASS 변수에서 올 필요가있다 만드는 이유.)

문제는 CSS 데이터 URL이 URL로 인코딩되거나 Base64로 인코딩된다는 것입니다. 그렇지 않다면 YUI 압축기 mangle them과 같은 도구를 사용하십시오.

나는 당신이 encode an image from an external file 일 수 있다고 알고 있지만, 나는 문자열을 인코딩해야합니다. 누구든지이 일을 할 수있는 방법을 알고 있습니까?

출처

2013-03-16 JW.

나는 JavaScript/CSS가 아닌 CSS/SASS에서이 모든 것을 선호합니다. –

나는 쉬운 방법이 있는지 확실하지 않습니다, 그래서 사용자 지정 SASS 기능 썼다 :

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

을

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;

출처

2013-03-16 22:42:59

누군가 나를'grunt-contrib-sass' gruntfile config에 포함시키고 싶다면'base64-encode.rb'를 프로젝트에 넣고'require : '/ path/to/base64-encode.rb'를 추가하십시오. 너의'말장난 파일 '. '. /'는 시스템 보석 위치 대신에 프로젝트 경로에 상대적인 플러그인을 찾기 위해'grunt'해야합니다. –

좀 더 설명해 주시겠습니까? 시도했지만, 실패했습니다. – Johansrk

newermind, 방금 필요했습니다. – Johansrk

알 그래서 그것은 나침반의 함수로 사용할 수 있습니다 : https://github.com/chriseppstein/compass/commit/5a015b3824f280af56f1265bf8c3a7c64a252621#L2R4

출처

2013-06-22 21:08:09 amrnt

'inline-image'를 사용하면 파일 경로를 제공하고, 함수는 파일을 읽고 그 내용을 인코딩합니다.문제는 함수에 직접 인코딩 할 데이터를 제공하는 것입니다. –

'inline-image'는 svg에서 변수를 사용할 수있는 가능성을주지 못하며,이 문제로 끝나는 사람들이 찾고있는 것일 수도 있습니다. – qkrijger

Compass/SASS의 URL- 또는 Base64- 인 코드 문자열

답변

관련 문제