[Misc_F] LESS - data-uri() 함수 - 파일을 인코딩해 불러오기. (= data-uri함수)

data-uri() 함수

[정의]

 

파일을 인코딩해서 불러오기.

 

※ 리소스를 즉시 처리해서, ieCompat 옵션이 켜져 있고 리소스가 너무 크거나 브라우저에서 함수를 사용하는 경우 url()로 돌아감. 

---

[구문]

 

data-uri(mimetype, url)

 

---

[매개변수]

 

mimetype

선택. MIME 타입 나타내는 문자열.

 

※ mimetype 없는 경우, 파일명 접미사에서 유추해 인코딩.

(1) 텍스트 및 svg 파일 경우 : utf-8로 인코딩.

(2) 다른 모든 파일 경우 : base64로 인코딩.

※ mimetype 있는 경우, ;base64로 끝나면 base64로 인코딩.

(1) image / jpeg; base64 경우 : base64로 인코딩. 

(2) text / html 경우 : utf-8로 인코딩.

 

url

필수. 파일 주소.

 

---

[예제]

 

(예1)

data-uri('../data/image.jpg');

LESS 출력:  url('data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==');

CSS 출력: url('../data/image.jpg');

(예2)

data-uri('image/jpeg;base64', '../data/image.jpg');

LESS 출력: url('data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==');

(예3)

data-uri('image/svg+xml;charset=UTF-8', 'image.svg');

LESS 출력: url("data:image/svg+xml;charset=UTF-8,%3Csvg%3E%3Ccircle%20r%3D%229%22%2F%3E%3C%2Fsvg%3E");

 

LESS data-uri() 함수

 http://lesscss.org/functions/#misc-functions-data-uri