Base64 encode files into less format.
npm install grunt-base64-less> A grunt task to resize images if needed and base 64 encode files into LESS or SASS format.
^0.4.0If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:
``shell`
npm install grunt-base64-less --save-dev
One the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
`js`
grunt.loadNpmTasks('grunt-base64-less');
to the data object passed into grunt.initConfig().`js
grunt.initConfig({
base64Less: {
your_target: {
// Target-specific file lists and/or options go here.
process: [
'wildcard/*'
],
dest: "output.file",
prefix: "font_",
sass: true, //[Optional] Defaults: false, output sass file & format
dimensions: false, //[Optional] Obtain dimensions and add vars in less
resize: { //[Optional] Resize images
imageMagick: true, //[Optional] defaults to GraphicsMagick if not set
width: 100, //Use width alone to change width while keeping aspect ratio
height: 100, //Use height alone to change height while keeping aspect ratio
force: true //[Optional] Forces aspect ratio change
}
}
}
})
`$3
js
grunt.initConfig({
base64Less: {
font: {
prefix: "font-",
process: ['package/fonts/', 'bowerBuild/fonts/'],
dest: 'package/less/font.less'
},
img: {
prefix: "img-",
process: ["package/img/*"],
dest: 'package/less/img.less',
dimensions: true
}
}
})
`Creates variables to be used in LESS or SASS.
css
//Use in LESS
@import "img.less";
@import "font.less";.mountain {
background: url(@img-mountain_jpg);
}
@font-face {
font-family: 'font_here';
src: url('@{font-font_here_eot}');
}
`css
//Use in SASS
@import "img";
@import "font";.mountain {
background: url($img-mountain_jpg);
}
@font-face {
font-family: 'font_here';
src: url('${font-font_here_eot}');
}
``