gulp-image-to-rule
Gulp plugin that generate CSS rules from a folder with images.
Install
npm install gulp-image-to-rule
Example
var path = ;var gulp = ;var i2r = ; gulp;
Output
{}
Options
selectorWithPseudo
Type: String
Default: null
Example: .{base}-{pseudo}, a:{pseudo} .{base}, button:{pseudo} .{base}, .{base}, a.{pseudo} .{base}, button.{pseudo} .{base}, .{base}.{pseudo}
Required: false
Can define custom selector, when pseudo selector is detected. Pseudo selectors are separated from the selectors by '_' in the image name (e.g. git-icon_hover
). Use keywords {base}
and {pseudo}
, that will be replaced in the output.
templates
Type: Object
Default: null
Example: { REGULAR: '<% _.forEach(images, function(image) { %><%= image.selector %> { background: url(<%= image.url %>) no-repeat 0 0; width: <%= image.dimensions.width %>px; height: <%= image.dimensions.height %>px; display: inline-block; vertical-align: middle; font-size: 0; }<%= \'\\n\' %><% }); %>', RETINA: '@media (-webkit-min-device-pixel-ratio: <%= ratio %>), (min-resolution: <%= dpi %>dpi) {<% _.forEach(images, function(image) { %><%= \'\\n\\t\' + image.selector %> { background: url(<%= image.url %>) no-repeat 0 0; width: <%= image.dimensions.width / image.ratio %>px; height: <%= image.dimensions.height / image.ratio %>px; background-size: <%= image.dimensions.width / image.ratio %>px <%= image.dimensions.height / image.ratio %>px; display: inline-block; vertical-align: middle; font-size: 0; }<% }); %>}' }
Required: false
Can define custom templates for regular and retina css output using lodash templates.
Notes
- The plugin has built-in support for retina images.
- The CSS selectors are based on name of file e.g
ico-arrow.png => .ico-arrow
. - The purpose of this plugin is to be like a preprocessor for the postcss-sprites plugin.
Contributing
Pull requests are welcome.
License
MIT © 2createStudio