Language Enhancement to support Sprites

Todd Cullen's Avatar

Todd Cullen

10 Jul, 2010 02:27 PM

I think it'd be really useful to have specific language features to specify an image sprite and the set it as the background-image of certain elements. Here's a suggestion on the syntax:

// create a sprite sheet object with name of the sprite sheet to be generated
@myspritesheet: sprite("myspritesheet.png");

 // references an image file to be inserted into the spritesheet
 // width and height are provided
@spriteimg: sprite-img(@myspritesheet, "sprite-img.png", 25, 50);

// set it as the background for this div - perhaps its an icon
   background-image: @spriteimg;

From this info, you could create the myspritesheet.png from the images listed and generate the appropriate css selector for the sprite. I'd be willing to take a crack at the programming although I haven't dug deep into how you manage the parse tree.

  1. 1 Posted by gerrit on 20 Jul, 2010 01:17 PM

    gerrit's Avatar

    This would be nice. Even better would be if I could just reference single images in my .less and lessc would also handle generating the CSS sprites for me, similar to this SASS extensions

  2. 2 Posted by Todd Cullen on 20 Jul, 2010 01:55 PM

    Todd Cullen's Avatar

    @gerrit - that's what I was suggesting. I probably should have provided more detailed example. "myspritesheet.png" would be generated by less from the listed sprite-img's. Definitely agree the SASS extension you listed has a solid syntax.

  3. 3 Posted by Nityananda on 08 Dec, 2010 03:31 PM

    Nityananda's Avatar

    Excelent idea.

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:


Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts


? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac