vieron/compass-img-delivery

Compass plugin for managing and delivering sharp vector images to all devices and browsers.

Compass Image Delivery

Compass plugin for managing and delivering sharp vector images to all devices and browsers. I'm not reinventing the wheel, this is an idea of Filament Group. Take a look at Unicon.

The usage differs a bit from Unicon

You should create a scss partial named _images.scss in the specified stylesheet directory. And here you can write all the css rules you want @extending the placeholder selectors who have the background declarations. For example:

/* _images.scss */

.foo, .var:after {
	@extend %arrow;
}

.logo {
	@extend %logo;
}

This assumes there are two images in the specified image directory, arrow.svg and logo.svg.

The output after processing would be 3 different files like:

/* images-svg.css */

.foo, .var:after {
	background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmN42NjkiLz4KPC9zdmc+Cg==");
	background-repeat: no-repeat;
}
          
.logo {
	background-image: url("data:image/svg+xml;base64,PDjVuBliasbhUnlsnIhNjVsDNFnBH4wIiBlbm+Cg==");
	background-repeat: no-repeat;
}

/* images-png.css */

.foo, .var:after {
	background-image: url("data:image/png;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmN42NjkiLz4KPC9zdmc+Cg==");
	background-repeat: no-repeat;
}
          
.logo {
	background-image: url("data:image/png;base64,PDjVuBliasbhUnlsnIhNjVsDNFnBH4wIiBlbm+Cg==");
	background-repeat: no-repeat;
}

/* images-fallback.css */

.foo, .var:after {
	background-image: url("/css_path/arrow.png");
	background-repeat: no-repeat;
}
          
.logo {
	background-image: url("/css_path/logo.png");
	background-repeat: no-repeat;
}

Installation

Installation is simple via Ruby Gems.

gem install compass-img-delivery

Cairo and svg2png are required, I recommend install them with Homebrew.

brew install svg2png

Usage

To use img-delivery with your project, require the plugin from your Compass configuration:

require "img-delivery"

• Call img_delivery sass function anywhere in your scss files to start using the extension.

  $images: img_delivery("/path/to/images/", "/path/to/stylesheets/file-basename", "/path/to/javascripts/file-basename");

• Create the _file-basename.scss (see stylesheets path above) partial in /path/to/stylesheets/ and start coding your SCSS rules.

  When running compass some files should automatically be created in /path/to/stylesheets/:

   /* This files contains all the placeholder selectors 
    * mapping images in /path/to/images/svg/ and each one
    *  @import a different copy of _images.scss file. */	 	 
   /path/to/stylesheets/file-basename-svg.css.scss
   /path/to/stylesheets/file-basename-png.css.scss
   /path/to/stylesheets/file-basename-fallback.css.scss	
   
   /* copies of original _images.scss partial */	
   /path/to/stylesheets/.img-delivery/_file-basename-svg.scss  
   /path/to/stylesheets/.img-delivery/_file-basename-png.scss
   /path/to/stylesheets/.img-delivery/_file-basename-fallback.scss
  

  What file @imports what:

   /path/to/stylesheets/file-basename-svg.css.scss
   	@import /path/to/stylesheets/.img-delivery/_file-basename-svg.scss
   
   /path/to/stylesheets/file-basename-png.css.scss
   	@import /path/to/stylesheets/.img-delivery/_file-basename-png.scss
   
   /path/to/stylesheets/file-basename-fallback.css.scss
   	@import /path/to/stylesheets/.img-delivery/_file-basename-fallback.scss
  

TODO

• Improve code. DRY.
• More Sass functions, return data-uris, png paths ...

Credit

• The original idea and the js code are work of Filament Group guys. See Unicon.