Sass + Compass + SmartSprites

These days I'm actively playing with SASS and Compass and I'm really starting to like them. The one thing I was missing is image sprite sheet generation using SmartSprites.

I know Compass have sprite sheet generation, but I'm already familiar with SmartSprites and that's the main reason I want to use it.

SmartSprites uses comments to declare sprite image and to map image in css to declared sprite image.

It looks like this:

/** sprite: mysprite; sprite-image: url('../img/mysprite.png'); sprite-layout: vertical */

.button {
  background-image: url("../img/avatar.png"); /** sprite-ref: mysprite; sprite-alignment: right; sprite-margin-top: 5px  */
  background-repeat: no-repeat;
}

Everything would be ok if Sass/Compass leave those comments, but unfortunately they remove all inline comments and they also replaces comments starting with "/**" for "/*".
Fortunately Sass/Compass leave comments that are not placed on CSS declaration lines.

Knowing all that, here is "SIMPLE" :) solution for using SmartSprites with Sass/Compass.

Sass file before it is compiled to css:

/*# sprite: mysprite; sprite-image: url('../img/mysprite.png'); sprite-layout: vertical */

@mixin image($url, $repeat: no-repeat) 
	background-image: url($url) 
	/*# sprite-ref: mysprite; sprite-alignment: right; sprite-margin-top: 5px  */ 
	background-repeat: $repeat

.button
	@include image("../img/spr/avatar.png", no-repeat) 
	
.header
	@include image("../img/header_01.png", no-repeat)

Compiled CSS file (note "/*#" represents comments used for SmartSprite declarations):

/*# sprite: mysprite; sprite-image: url('../img/mysprite.png'); sprite-layout: vertical */
.button {
  background-image: url("../img/spr/avatar.png");
  /*# sprite-ref: mysprite; sprite-alignment: right; sprite-margin-top: 5px  */
  background-repeat: no-repeat;
}

.header {
  background-image: url("../img/header_01.png");
  /*# sprite-ref: mysprite; sprite-alignment: right; sprite-margin-top: 5px  */
  background-repeat: no-repeat;
}

Compiled CSS now can be used in development environment, but for production it would be nice to "compile" :) images into sprites.

Here is simple ANT script for building image sprite sheets

<?xml version="1.0" encoding="UTF-8"?>
<project name="Sass+Compass+SmartSprites" default="GENERATE SPRITESHEETS" basedir=".">
	<description>Compressing JavaScript and CSS files</description>
	
	<dirname property="smartsprites.basedir" file="${ant.file.smartsprites}"/>
	<taskdef name="smartsprites" classname="org.carrot2.labs.smartsprites.ant.SmartSpritesTask" />

	<target name="GENERATE SPRITESHEETS" description="Generating image spritesheets">
		<replaceregexp match=";.*?\n.*/\*\s*#" replace="; /*#" flags="gi">
			<fileset dir="css" includes="**/*.css"/>
		</replaceregexp>
		<replaceregexp match="/\*#" replace="/**" flags="gi">
			<fileset dir="css" includes="**/*.css"/>
		</replaceregexp>

		<smartsprites rootdir="css"
					  documentrootdir="."
					  outputdir="css"
					  cssfileencoding="UTF-8"
					  cssfilesuffix="sprite"
					  loglevel="INFO"
					  spritepngdepth="AUTO"
					  spritepngie6="" />
	</target>

</project>

The ANT script first converts CSS script to SmartSprites readable CSS:

/** sprite: mysprite; sprite-image: url('../img/mysprite.png'); sprite-layout: vertical */
.button {
  background-image: url("../img/spr/avatar.png"); /** sprite-ref: mysprite; sprite-alignment: right; sprite-margin-top: 5px  */
  background-repeat: no-repeat;
}

.header {
  background-image: url("../img/header_01.png"); /** sprite-ref: mysprite; sprite-alignment: right; sprite-margin-top: 5px  */
  background-repeat: no-repeat;
}

And than it generates CSS that uses image sprite sheet instead many single images:

.button {
  background-image: url('../img/mysprite.png');
  background-position: right -0px;
  background-repeat: no-repeat;
}

.header {
  background-image: url('../img/mysprite.png');
  background-position: right -58px;
  background-repeat: no-repeat;
}

It is really simple! All you have to do is to place "special" comments "/*#" for smartSprites below image declarations and than run ANT script to generate sprites.