Base64 Encode Function

A custom function that can encode any file referenced by its relative file path, and replaces it with the base64 encoded data URL to embed the data inline in CSS

Syntax

--base64-encode(<path to file>)

• <path to file> is a relative path to the SVG file from the location of the CSS stylesheet in the filesystem

Usage

Use --base64-encode() anywhere a file could be used in CSS to automatically convert it to url() with the encoded file data inside.

Input

html {
  background: --base64-encode(assets/logo.png)
}

Output

html {
  background: url(data:image/png;base64, <base64 data>)
}

Note: It also works with unquoted --base64-encode(), single-quoted --base64-encode('') or double-quoted --base64-encode("") URLs