One off the biggest lacks, when switching from Compass to Libsass are the loosing off the Image Handling. This Plugin try to compensate it. It runs over your Image directory and generate a Image Map.
This plugin requires Grunt
If 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:
npm install grunt-libsass-image --save-dev
In your project's Gruntfile, add a section named
libsass_image to the data object passed into
Prefix the Target Selector in the Image Map. Normaly not needed.
Seperate the Images in different Folders, when using the Mixins. The Target Selector based on the Name off the image, prefixed with the folder name.
The Plugin generate now a image map:
// Variables;;;;// Internal Mixin: Get Image Dimension// Write the dimension off a Image in the CSS//// $width [string] = The Width off the Image// $height [string] = The Height off the Image// $option [string] = both: height & width | width: width | height: height// Mixin: Images// Including Single Images from the Single Directory as Background Image.//// $image [string] = Name off the Image// $dimensions [string] = both: height & width | width: width | height: height// $pos [string] = The Image Position - can be 'false'// $retina [boolean] = With set on 'true' the retina fallback will be included// Mixin: SVGPNG// Include the SVG Background Image with a PNG Fallback.//// $image [string] = Name off the Image - the SVG File must be in the Same directory// $dimensions [string] = both: height & width | width: width | height: height// $pos [string] = The Image Position - can be 'false'// Mixin: Textures// Including Textures Images from the textures Directory as Background Image.//// $image [string] = Name off the Image// $repeat [string] = How the Image would be repeated. x : repeat-x | y : repeat-y// $pos [string] = The Image Position - can be 'false'// $retina [boolean] = With set on 'true' the retina fallback will be included
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.
Based on CSS-Image