A simple utility for generating Sass/Less variables for images.

Install from NPM:

npm install images-to-variables

To generate encoded image values from Node, call the create function. A promise is returned and an array containing the encoded variables is passed to handlers:

var imagesToVariables = require('images-to-variables');

imagesToVariables.create( '*.png' ).then( function( variables ) {
	console.log( variables[0].name );
	console.log( variables[0].length );
	console.log( variables[0].value );
} );

A Note About Encoding: currently, the .png contents are base-64 encoded so it can be safely included. For .svg, the contents are simply escaped as per RFC 2397.

Specify the dest option to write the variables directly to a file :

imagesToVariables.create( '*.png', { dest: variables.less } );

Specify the prefix option to prefix the generated variables:

imagesToVariables.create( '*.png', { prefix: 'vui-' } );

Specify the scssFormatter if you want scss variables:

imagesToVariables.create(
	'*.png', {
		formatter: imagesToVariables.scssFormatter
	}
);

The default variable format is Less, however you can explicitly specify the lessFormatter if desired:

imagesToVariables.create(
	'*.png', {
		formatter: imagesToVariables.lessFormatter
	}
);

By default, images are minified using imagemin before encoding the variables. This can optionally be disabled by providing the optimize option:

imagesToVariables.create( '*.png', { optimize: false } );

Creating variables from the CLI is a piece of cake. For example, the following commands will generate Less and Scss files containing variables formatted for Less or Scss respectively. A variable is generated for each file represented by the *.png pattern, and the variables will be prefixed with vui-.

imgtoless -p vui- -o variables.less *.png

imgtoscss -p vui- -o variables.scss *.png

Note: Currently, the images must be uniquely named. The module currently does not handle duplicate file names spread across directories, but this could be added.