base64 encoder for node-sass
Adding a base64 encoder function to node-sass is pretty straight-forward.
We’ll have to define a encodeBase64
function and pass it to sass compiler.
If you’re using gulp than it will look something like this:
var gulp = require('gulp');
var sass = require('gulp-sass');
var nodeSass = require('node-sass');
var sassOptions = {
functions: {
'encodeBase64($string)': function($string) {
var buffer = new Buffer($string.getValue());
return nodeSass.types.String(buffer.toString('base64'));
}
}
}
gulp.src(source)
.pipe(sass(sassOptions))
.pipe(destination)
)
The main bit here are lines 5-12 were we define options for SASS compiler. In SASS that can be used as
.facebook-icon {
$encodedSvg: encodeBase64('<svg><path d="M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z" /></svg>');
background-image: url('data:image/svg+xml;base64,#{$encodedSvg}');
}
If you’re looking for a way to inline your images (svg, png, jpg…) into SASS then take a look at JosephClay/sass-inline-image.