add: options.variables

- allows users to control output of base64 encoded images as SASS/SCSS
variables.

Gruntfile.js

@@ -49,6 +49,23 @@ module.exports = function (grunt) {
           "tmp/base64.sass",
           "tmp/base64.scss"
         ]
+      },
+
+      variables_option: {
+        options: {
+          classPrefix: 'data-',
+          variables: true
+        },
+        src: [
+          "test/fixtures/test-png.png",
+          "test/fixtures/test-gif.gif",
+          "test/fixtures/test-jpg.jpg",
+          "test/fixtures/test-bmp.bmp"
+        ],
+        dest: [
+          "tmp/base64.variables.scss",
+          "tmp/base64.variables.sass"
+        ]
       }
     }
   });

README.md

@@ -54,6 +54,12 @@ Default value: `true`
 
 Output as [placeholders](http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#placeholder_selectors_) or simple CSS classes - for SASS/SCSS only.
 
+#### options.variables
+Type: `Boolean`
+Default value: `false`
+
+Output as [variables](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#variables_) for SASS/SCSS only.
+
 #### src
 Type: `String` or `Array`
 

tasks/datauri.js

@@ -16,12 +16,13 @@ module.exports = function (grunt)
 	var filesize = require('filesize');
 	var datauri = require('datauri');
 
-  // templates to generate CSS classes
+  // templates to generate CSS classes, placeholder selectors, or variables
 	var cssTemplates = {
 		scss: '%{{class}} {\n\tbackground-image: url("{{data}}");\n}',
 		sass: '%{{class}}\n\tbackground-image: url("{{data}}")',
     sass_no: '.{{class}}\n\tbackground-image: url("{{data}}")',
-		default: '.{{class}} {\n\tbackground-image: url("{{data}}");\n}'
+		default: '.{{class}} {\n\tbackground-image: url("{{data}}");\n}',
+		variables: '${{class}}: "{{data}}";'
 	};
 
 	// filesize is only critical for IE8
@@ -36,7 +37,8 @@ module.exports = function (grunt)
 			classPrefix: '',
 			classSuffix: '',
 			checkFilesize: true,
-      usePlaceholder: true
+      usePlaceholder: true,
+      variables: false
 		});
 
 
@@ -87,7 +89,11 @@ module.exports = function (grunt)
 
       className = options.classPrefix + path.basename( data.path ).split( '.' )[0] + options.classSuffix;
       filetype = options.usePlaceholder ? filetype : filetype + '_no';
-			template = cssTemplates[ filetype ] || cssTemplates.default;
+      if(options.variables) {
+      	template = cssTemplates.variables;
+      } else {
+      	template = cssTemplates[ filetype ] || cssTemplates.default;
+      }
 
 			return template.replace( '{{class}}', className ).replace( '{{data}}', data.data );
 		}

test/datauri_test.js

@@ -4,23 +4,35 @@ var grunt = require('grunt');
 var fs = require('fs');
 
 exports.datauri = {
-	
+
-	setUp: function( done ) 
+	setUp: function( done )
 	{
 		done();
 	},
-	
+
 	main_options: function( test )
 	{
 		test.expect( 3 );
-		
+
 		var file = grunt.file.read;
-		
+
 		test.equal( file( "tmp/base64.css" ), file( "test/expected/base64.css" ), "CSS should be equal." );
 		test.equal( file( "tmp/base64.scss" ), file( "test/expected/base64.scss" ), "SCSS should be equal." );
 		test.equal( file( "tmp/base64.sass" ), file( "test/expected/base64.sass" ), "SASS should be equal." );
-		
+
+		test.done();
+	},
+
+	variables_option: function( test)
+	{
+		test.expect( 2 );
+
+		var file = grunt.file.read;
+
+		test.equal( file( "tmp/base64.variables.scss"), file( "test/expected/base64.variables.scss" ), "SCSS variables should be equal.");
+		test.equal( file( "tmp/base64.variables.sass"), file( "test/expected/base64.variables.sass" ), "SASS variables should be equal.");
+
 		test.done();
 	}
-	
+
 };