Add icon documentation, have a bit of a re-org

README.md

@@ -555,7 +555,7 @@ The sprite mixins give you an easy way to use sprited background images. It assu
 ### SETTING: @sprite-image
 
 ```css
-@sprite-image: url('/images/example-sprite.png');
+@sprite-image: '/images/example-sprite.png';
 ```
 
 The default image to use for the sprite mixins. Can be a Base64 encoded data-uri.
@@ -625,6 +625,9 @@ The same as the `.sprite()` mixin above, but allows you to specify the height an
 .example {
 	.sprite-sized( 2, 3, 16px, 32px );
 }
+.example2 {
+	.sprite-sized( 2, 3, 16px );
+}
 /* Example output: */
 .example {
 	background-image: url('/images/example-sprite.png');
@@ -633,6 +636,13 @@ The same as the `.sprite()` mixin above, but allows you to specify the height an
 	width: 16px;
 	height: 32px;
 }
+.example2 {
+	background-image: url('/images/example-sprite.png');
+	background-repeat: no-repeat;
+	background-position: -100px  -150px;
+	width: 16px;
+	height: 16px;
+}
 ```
 
 ### .sprite-ir()
@@ -665,6 +675,9 @@ Augments the `.sprite-sized()` mixin to include image replacement properties as
 .example {
 	.sprite-ir( 2, 3, 16px, 32px );
 }
+.example2 {
+	.sprite-ir( 2, 3, 16px );
+}
 /* Example output: */
 .example {
 	background-image: url('/images/example-sprite.png');
@@ -678,6 +691,18 @@ Augments the `.sprite-sized()` mixin to include image replacement properties as
 	color: transparent;
 	background-color: transparent;
 }
+.example2 {
+	background-image: url('/images/example-sprite.png');
+	background-repeat: no-repeat;
+	background-position: -100px  -150px;
+	width: 16px;
+	height: 16px;
+	border: 0;
+	font: 0/0 a;
+	text-shadow: none;
+	color: transparent;
+	background-color: transparent;
+}
 ```
 
 ### .sprite-image()
@@ -748,7 +773,10 @@ Similar to the `.sprite-pos()` [partial mixin](#optimising-output-using-partial-
 ```css
 /* Usage: */
 .example {
-	.sprite-pos-sized(2,3, 16px, 32px);
+	.sprite-pos-sized( 2, 3, 16px, 32px );
+}
+.example2 {
+	.sprite-pos-sized( 2, 3, 16px );
 }
 /* Example output: */
 .example {
@@ -756,12 +784,227 @@ Similar to the `.sprite-pos()` [partial mixin](#optimising-output-using-partial-
 	width: 16px;
 	height: 32px;
 }
+.example2 {
+	background-position: -100px  -150px;
+	width: 16px;
+	height: 16px;
+}
 ```
 
 Icons
 -------
 
-Documentation coming soon.
+The icons mixins let you easily place an icon before or after an element, using absolutely positioned :before and :after pseudo elements to display them. There are also sprited icon mixins build on the sprite mixins above.
+
+### .prepend-icon()
+
+Prepends an icon to the element it's called on.
+
+```css
+.prepend-icon( <@icon-image>, <@width>, <@height>[, <@nudge-left>[, <@nudge-top>[, <@pad>]]] );
+```
+
+* `@icon-image`: URL or data URI of an image to use for the prepended icon
+* `@width`: Width of the image
+* `@height`: Height of the image
+* `@nudge-left`: The value of the `left` property for the icon. Defaults to `0`.
+* `@nudge-top`: The value of the `top` property for the icon. Defaults to `0`.
+* `@pad`: Left-padding (in addition to the width of the icon) to apply to the element. Defaults to `10px`
+
+```css
+/* Usage: */
+.example {
+	.prepend-icon( 'img/icon.png', 16px, 32px );
+}
+/* Example output: */
+.example {
+	position: relative;
+	padding-left: 42px;
+}
+.example:before {
+	position: absolute;
+	display: block;
+	content: ' ';
+	background: url('img/icon.png') no-repeat 0 0;
+	width: 16px;
+	height: 32px;
+	top: 0;
+	left: 0;
+}
+```
+
+### .append-icon()
+
+Appends an icon after the element it's called on.
+
+```css
+.append-icon( <@icon-image>, <@width>, <@height>[, <@nudge-right>[, <@nudge-top>[, <@pad>]]] );
+```
+
+* `@icon-image`: URL or data URI of an image to use for the prepended icon
+* `@width`: Width of the image
+* `@height`: Height of the image
+* `@nudge-right`: The value of the `right` property for the icon. Defaults to `0`.
+* `@nudge-top`: The value of the `top` property for the icon. Defaults to `0`.
+* `@pad`: Left-padding (in addition to the width of the icon) to apply to the element. Defaults to `10px`
+
+```css
+/* Usage: */
+.example {
+	.append-icon( 'img/icon.png', 16px, 32px );
+}
+/* Example output: */
+.example {
+	position: relative;
+	padding-right: 42px;
+}
+.example:after {
+	position: absolute;
+	display: block;
+	content: ' ';
+	background: url('img/icon.png') no-repeat 0 0;
+	width: 16px;
+	height: 32px;
+	top: 0;
+	right: 0;
+}
+```
+
+### .prepend-sprite-icon()
+
+Prepends an icon taken from the sprite to the element it's called on.
+
+```css
+.prepend-sprite-icon( <@x>, <@y>, <@width>, <@height>[, <@nudge-left>[, <@nudge-top>[, <@pad>[, <@sprite-image>[, <@sprite-grid>]]]]] );
+```
+
+* `@x`: The x coordinate of the desired image on the grid.
+* `@y`: The y coordinate of the desired image on the grid.
+* `@width`: Width of the image
+* `@height`: Height of the image
+* `@nudge-left`: The value of the `left` property for the icon. Defaults to `0`.
+* `@nudge-top`: The value of the `top` property for the icon. Defaults to `0`.
+* `@pad`: Left-padding (in addition to the width of the icon) to apply to the element. Defaults to `10px`
+* `@sprite-image`: The sprite image to use. Defaults to the globally defined `@sprite-image` value.
+* `@sprite-grid`: The grid size used in the sprite. Defaults to the globally defined `@sprite-grid` value.
+
+```css
+/* Usage: */
+.example {
+	.prepend-sprite-icon( 1, 2, 16px, 32px );
+}
+/* Example output: */
+.example {
+	position: relative;
+	padding-left: 42px;
+}
+.example:before {
+	position: absolute;
+	display: block;
+	content: ' ';
+	background-image: url('/images/example-sprite.png');
+	background-repeat: no-repeat;
+	background-position: -50px -100px;
+	width: 16px;
+	height: 32px;
+	top: 0;
+	left: 0;
+}
+```
+
+### .append-sprite-icon()
+
+Appends an icon taken from the sprite after the element it's called on.
+
+```css
+.append-sprite-icon( <@x>, <@y>, <@width>, <@height>[, <@nudge-right>[, <@nudge-top>[, <@pad>[, <@sprite-image>[, <@sprite-grid>]]]]] );
+```
+
+* `@x`: The x coordinate of the desired image on the grid.
+* `@y`: The y coordinate of the desired image on the grid.
+* `@width`: Width of the image
+* `@height`: Height of the image
+* `@nudge-right`: The value of the `right` property for the icon. Defaults to `0`.
+* `@nudge-top`: The value of the `top` property for the icon. Defaults to `0`.
+* `@pad`: Left-padding (in addition to the width of the icon) to apply to the element. Defaults to `10px`
+* `@sprite-image`: The sprite image to use. Defaults to the globally defined `@sprite-image` value.
+* `@sprite-grid`: The grid size used in the sprite. Defaults to the globally defined `@sprite-grid` value.
+
+```css
+/* Usage: */
+.example {
+	.append-sprite-icon( 1, 2, 16px, 32px );
+}
+/* Example output: */
+.example {
+	position: relative;
+	padding-right: 42px;
+}
+.example:after {
+	position: absolute;
+	display: block;
+	content: ' ';
+	background-image: url('/images/example-sprite.png');
+	background-repeat: no-repeat;
+	background-position: -50px -100px;
+	width: 16px;
+	height: 32px;
+	top: 0;
+	right: 0;
+}
+```
+
+### .prepend-sprite-icon-pos()
+
+Adjusts the positioning of a prepended sprite icon.
+
+```css
+.prepend-sprite-icon-pos( <@x>, <@y>[, <@nudge-left>[, <@nudge-top>[, <@sprite-grid>]]] );
+```
+
+* `@x`: The x coordinate of the desired image on the grid.
+* `@y`: The y coordinate of the desired image on the grid.
+* `@nudge-left`: The value of the `left` property for the icon. Defaults to `0`.
+* `@nudge-top`: The value of the `top` property for the icon. Defaults to `0`.
+* `@sprite-grid`: The grid size used in the sprite. Defaults to the globally defined `@sprite-grid` value.
+
+```css
+/* Usage: */
+.example {
+	.prepend-sprite-icon-pos( 1, 2 );
+}
+/* Example output: */
+.example:before {
+	background-position: -50px -100px;
+}
+```
+
+### .append-sprite-icon-pos()
+
+Adjusts the positioning of a appended sprite icon.
+
+```css
+.append-sprite-icon-pos( <@x>, <@y>[, <@nudge-right>[, <@nudge-top>[, <@sprite-grid>]]] );
+```
+
+* `@x`: The x coordinate of the desired image on the grid.
+* `@y`: The y coordinate of the desired image on the grid.
+* `@nudge-right`: The value of the `left` property for the icon. Defaults to `0`.
+* `@nudge-top`: The value of the `top` property for the icon. Defaults to `0`.
+* `@sprite-grid`: The grid size used in the sprite. Defaults to the globally defined `@sprite-grid` value.
+
+```css
+/* Usage: */
+.example {
+	.append-sprite-icon-pos( 1, 2 );
+}
+/* Example output: */
+.example:after {
+	background-position: -50px -100px;
+}
+```
+
+
 
 
 Grids

examples/css/example.css

@@ -276,7 +276,7 @@ h2 {
   position: absolute;
   display: block;
   content: ' ';
-  background-image: url('../examples/sprite.png');
+  background-image: url('../img/sprite.png');
   background-repeat: no-repeat;
   background-position: -100px -50px;
   width: 6px;
@@ -454,11 +454,11 @@ h2 {
   display: inline;
   zoom: 1;
 }
-.more:before {
+.more:after {
   position: absolute;
   display: block;
   content: ' ';
-  background-image: url('../examples/sprite.png');
+  background-image: url('../img/sprite.png');
   background-repeat: no-repeat;
   background-position: -100px -50px;
   width: 6px;
@@ -481,7 +481,7 @@ h2 {
   position: absolute;
   display: block;
   content: ' ';
-  background-image: url('../examples/sprite.png');
+  background-image: url('../img/sprite.png');
   background-repeat: no-repeat;
   background-position: 0px 0px;
   width: 28px;
@@ -513,4 +513,18 @@ h2 {
 .icon-nav .ghosts a:hover:before {
   background-position: -50px -150px;
 }
+.icon.twitter {
+  position: relative;
+  padding-left: 42px;
+}
+.icon.twitter:before {
+  position: absolute;
+  display: block;
+  content: ' ';
+  background: url('../img/twitter-32x32.png') no-repeat 0 0;
+  width: 32px;
+  height: 32px;
+  top: -8px;
+  left: 0;
+}
 /* Other Helpers */

examples/grids.html

@@ -5,7 +5,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<link rel="shortcut icon" href="http://clearleft.com/favicon.ico" type="image/x-icon" />
 	
-	<link rel="stylesheet" href="../_compiled/example.css" type="text/css">
+	<link rel="stylesheet" href="css/example.css" type="text/css">
 	
 	<title>ClearLESS Examples</title>
 </head>

examples/index.html

@@ -5,7 +5,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<link rel="shortcut icon" href="http://clearleft.com/favicon.ico" type="image/x-icon" />
 	
-	<link rel="stylesheet" href="../_compiled/example.css" type="text/css">
+	<link rel="stylesheet" href="css/example.css" type="text/css">
 	
 	<title>ClearLESS Examples</title>
 </head>

examples/less/example.less

@@ -1,8 +1,8 @@
-@import "../mixins/all";
+@import "../../mixins/all";
 
 // Default settings override
 
-@sprite-image: url('../examples/sprite.png');
+@sprite-image: '../img/sprite.png';
 @using-modernizr: false;
 @using-ieclasses: true;
 
@@ -14,7 +14,7 @@
 // Project settings
 
 @mobile-width: 40em;
-
+ 
 /* ---- reset ---- */
 
 .normalize();
@@ -56,7 +56,7 @@ h2 {
 	}
 	a {
 		.inline-block();
-		.icon(2, 1, 6px, 11px, 10px, 0, 4px);
+		.prepend-sprite-icon(2, 1, 6px, 11px, 0, 4px);
 	}
 }
 
@@ -240,7 +240,7 @@ h2 {
 
 .more {
 	.inline-block();
-	.right-icon(2, 1, 6px, 11px, 10px, 0, 4px);
+	.append-sprite-icon(2, 1, 6px, 11px, 0, 4px);
 }
 
 .icon-nav {
@@ -248,34 +248,38 @@ h2 {
 		.inline-block();
 		padding-top: 10px;
 		padding-bottom: 10px;
-		.icon(0, 0, 28px, 28px, 10px, 0, 2px);
+		.prepend-sprite-icon(0, 0, 28px, 28px, 0, 2px);
 	}
 	.robots a {
-		.icon-pos(0,0);
+		.prepend-sprite-icon-pos(0,0);
 		&:hover {
-			.icon-pos(1,0);
+			.prepend-sprite-icon-pos(1,0);
 		}
 	}
 	.rockets a {
-		.icon-pos(0,1);
+		.prepend-sprite-icon-pos(0,1);
 		&:hover {
-			.icon-pos(1,1);
+			.prepend-sprite-icon-pos(1,1);
 		}
 	}
 	.runners a {
-		.icon-pos(0,2);
+		.prepend-sprite-icon-pos(0,2);
 		&:hover {
-			.icon-pos(1,2);
+			.prepend-sprite-icon-pos(1,2);
 		}
 	}
 	.ghosts a {
-		.icon-pos(0,3);
+		.prepend-sprite-icon-pos(0,3);
 		&:hover {
-			.icon-pos(1,3);
+			.prepend-sprite-icon-pos(1,3);
 		}
 	}
 }
 
+.icon.twitter {
+	.prepend-icon('../img/twitter-32x32.png', 32px, 32px, 0, -8px);
+}
+
 /* Other Helpers */
 
 

examples/nested-grids.html

@@ -5,7 +5,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<link rel="shortcut icon" href="http://clearleft.com/favicon.ico" type="image/x-icon" />	
 	
-	<link rel="stylesheet" href="../_compiled/example.css" type="text/css">
+	<link rel="stylesheet" href="css/example.css" type="text/css">
 	
 	<title>ClearLESS Examples</title>
 </head>

examples/other.html

@@ -5,7 +5,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<link rel="shortcut icon" href="http://clearleft.com/favicon.ico" type="image/x-icon" />
 		
-	<link rel="stylesheet" href="../_compiled/example.css" type="text/css">
+	<link rel="stylesheet" href="css/example.css" type="text/css">
 	
 	<title>ClearLESS Examples</title>
 </head>

examples/sprites.html

@@ -5,7 +5,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<link rel="shortcut icon" href="http://clearleft.com/favicon.ico" type="image/x-icon" />
 		
-	<link rel="stylesheet" href="../_compiled/example.css" type="text/css">
+	<link rel="stylesheet" href="css/example.css" type="text/css">
 	
 	<title>ClearLESS Examples</title>
 </head>
@@ -34,5 +34,12 @@
 		
 	</div>
 	
+	<div class="receptacle">
+		
+		<p><a href="#" class="icon twitter">Twitter</a></p>
+		
+	</div>
+	
+	
 </body>
 </html>

mixins/helpers.less

@@ -59,7 +59,6 @@
 	}
 }
 
-// Gradients
 #gradient {
 	.horizontal (@start-color, @end-color) when not (@disable-filters) {
 		background-color: @end-color;
@@ -113,7 +112,6 @@
 		filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@start-color,@end-color)); /* IE6 & IE7 */
 		-ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@start-color,@end-color); /* IE8+ */
 	}
-	
 }
 
 // Helpers --------------------------------

mixins/icons.less

@@ -4,51 +4,99 @@
 // These can only be used on block or inline-block elements.
 // ==============================================
 
-.icon(@x, @y, @width, @height, @pad:10, @nudge-left:0, @nudge-top:0, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) when (@using-modernizr) {
+// Non-sprited icons --------------------------------
+
+.prepend-icon( @icon-image, @width, @height, @nudge-left:0, @nudge-top:0, @pad:10 ) when (@using-modernizr) {
 	.generatedcontent & {
 		position: relative;
 		padding-left: (@width + @pad) * 1px;
 	}
 	.generatedcontent &:before {
-		._generated-icon( @x, @y, @width, @height, @sprite-image, @sprite-grid );
+		._generated-icon( @width, @height, @icon-image );
 		top: @nudge-top;
 		left: @nudge-left;
 	}
 }
 
-.icon(@x, @y, @width, @height, @pad:10, @nudge-left:0, @nudge-top:0, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) when (@using-modernizr = false) {
+.prepend-icon( @icon-image, @width, @height, @nudge-left:0, @nudge-top:0, @pad:10 ) when not (@using-modernizr) {
 	position: relative;
 	padding-left: (@width + @pad) * 1px;
 	&:before {
-		._generated-icon( @x, @y, @width, @height, @sprite-image, @sprite-grid );
+		._generated-icon( @width, @height, @icon-image );
 		top: @nudge-top;
 		left: @nudge-left;
 	}
 }
 
-.right-icon(@x, @y, @width, @height, @pad:10, @nudge-right:0, @nudge-top:0, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) when (@using-modernizr) {
+.append-icon( @icon-image, @width, @height, @nudge-right:0, @nudge-top:0, @pad:10 ) when (@using-modernizr) {
+	.generatedcontent & {
+		position: relative;
+		padding-right: (@width + @pad) * 1px;
+	}
+	.generatedcontent &:after {
+		._generated-icon( @width, @height, @icon-image );
+		top: @nudge-top;
+		right: @nudge-right;
+	}
+}
+
+.append-icon( @icon-image, @width, @height, @nudge-right:0, @nudge-top:0, @pad:10 ) when not (@using-modernizr) {
+	position: relative;
+	padding-right: (@width + @pad) * 1px;
+	.generatedcontent &:after {
+		._generated-icon( @width, @height, @icon-image );
+		top: @nudge-top;
+		right: @nudge-right;
+	}
+}
+
+// Sprited icons --------------------------------
+
+.prepend-sprite-icon(@x, @y, @width, @height, @nudge-left:0, @nudge-top:0, @pad:10, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) when (@using-modernizr) {
+	.generatedcontent & {
+		position: relative;
+		padding-left: (@width + @pad) * 1px;
+	}
+	.generatedcontent &:before {
+		._generated-sprite-icon( @x, @y, @width, @height, @sprite-image, @sprite-grid );
+		top: @nudge-top;
+		left: @nudge-left;
+	}
+}
+
+.prepend-sprite-icon(@x, @y, @width, @height, @nudge-left:0, @nudge-top:0, @pad:10, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) when not (@using-modernizr) {
+	position: relative;
+	padding-left: (@width + @pad) * 1px;
+	&:before {
+		._generated-sprite-icon( @x, @y, @width, @height, @sprite-image, @sprite-grid );
+		top: @nudge-top;
+		left: @nudge-left;
+	}
+}
+
+.append-sprite-icon(@x, @y, @width, @height, @nudge-right:0, @nudge-top:0, @pad:10, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) when (@using-modernizr) {
 	.generatedcontent & {
 		padding-right: (@width + @pad) * 1px;
 		position: relative;
 	}
-	.generatedcontent &:before {
+	.generatedcontent &:after {
-		._generated-icon( @x, @y, @width, @height, @sprite-image, @sprite-grid );
+		._generated-sprite-icon( @x, @y, @width, @height, @sprite-image, @sprite-grid );
 		top: @nudge-top;
 		right: @nudge-right;
 	}
 }
 
-.right-icon(@x, @y, @width, @height, @pad:10, @nudge-right:0, @nudge-top:0, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) when (@using-modernizr = false) {
+.append-sprite-icon(@x, @y, @width, @height, @nudge-right:0, @nudge-top:0, @pad:10, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) when not (@using-modernizr) {
 	position: relative;
 	padding-right: (@width + @pad) * 1px;
-	&:before {
+	&:after {
-		._generated-icon( @x, @y, @width, @height, @sprite-image, @sprite-grid );
+		._generated-sprite-icon( @x, @y, @width, @height, @sprite-image, @sprite-grid );
 		top: @nudge-top;
 		right: @nudge-right;
 	}
 }
 
-.icon-pos(@x, @y, @nudge-left:0, @nudge-top:0, @sprite-grid:@sprite-grid) when (@using-modernizr) {
+.prepend-sprite-icon-pos(@x, @y, @nudge-left:0, @nudge-top:0, @sprite-grid:@sprite-grid) when (@using-modernizr) {
 	.generatedcontent &:before {
 		.sprite-pos(@x, @y, @sprite-grid);
 		.nudge-l(@nudge-left);
@@ -56,7 +104,7 @@
 	}
 }
 
-.icon-pos(@x, @y, @nudge-left:0, @nudge-top:0, @sprite-grid:@sprite-grid) {
+.prepend-sprite-icon-pos(@x, @y, @nudge-left:0, @nudge-top:0, @sprite-grid:@sprite-grid) when not (@using-modernizr) {
 	&:before {
 		.sprite-pos(@x, @y, @sprite-grid);
 		.nudge-l(@nudge-left);
@@ -64,16 +112,16 @@
 	}
 }
 
-.right-icon-pos(@x, @y, @nudge-right:0, @nudge-top:0, @sprite-grid:@sprite-grid) when (@using-modernizr) {
+.append-sprite-icon-pos(@x, @y, @nudge-right:0, @nudge-top:0, @sprite-grid:@sprite-grid) when (@using-modernizr) {
-	.generatedcontent &:before {
+	.generatedcontent &:after {
 		.sprite-pos(@x, @y, @sprite-grid);
 		.nudge-r(@nudge-right);
 		.nudge-t(@nudge-top);
 	}
 }
 
-.right-icon-pos(@x, @y, @nudge-right:0, @nudge-top:0, @sprite-grid:@sprite-grid) {
+.append-sprite-icon-pos(@x, @y, @nudge-right:0, @nudge-top:0, @sprite-grid:@sprite-grid) when not (@using-modernizr) {
-	&:before {
+	&:after {
 		.sprite-pos(@x, @y, @sprite-grid);
 		.nudge-r(@nudge-right);
 		.nudge-t(@nudge-top);
@@ -82,7 +130,15 @@
 
 // ---- internal use mixins -----------------------
 
-._generated-icon(@x, @y, @width, @height, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) {
+._generated-icon(@width, @height, @icon-image) {
+	position: absolute;
+	display: block;
+	content: ' ';
+	background: url(@icon-image) no-repeat 0 0;
+	.size(@width, @height);
+}
+
+._generated-sprite-icon(@x, @y, @width, @height, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) {
 	position: absolute;
 	display: block;
 	content: ' ';

mixins/settings.less

@@ -16,7 +16,7 @@
 
 // Sprites --------------------------------
 
-@sprite-image: url('/example.png');
+@sprite-image: '/example.png';
 @sprite-grid: 50px;
 
 // Grid --------------------------------

mixins/sprites.less

@@ -30,7 +30,7 @@
 }
 
 .sprite-image(@sprite-image:@sprite-image) {
-	background-image: @sprite-image;
+	background-image: url(@sprite-image);
 	background-repeat: no-repeat;
 }