draeton/stitches — pull request #9 by JonDum (2013-03-07 22:07:51+00:00)
Title: Fix less.tpl from copying Base64 URI over and over

When using the css base64 option with the less template, when compiled it would copy over the massive text image data to be copied to every single entry.

From this mess:

.sprite-Facebook {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYAAAADZCAYAAAApMec0AAAgAElEQVR4XuxdB2AUxfee9EJCAgmEDlIUG4h--and so on
display: block;
width: 115px;
height: 143px;
}
.sprite-Twitter {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYAAAADZCAYAAAApMec0AAAgAElEQVR4XuxdB2AUxfee9EJCAgmEDlIUG4h--and so on
display: block;
width: 114px;
height: 143px;
}
.sprite-Mail {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYAAAADZCAYAAAApMec0AAAgAElEQVR4XuxdB2AUxfee9EJCAgmEDlIUG4h--and so on
display: block;
width: 114px;
height: 143px;
}
.sprite-passbook {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYAAAADZCAYAAAApMec0AAAgAElEQVR4XuxdB2AUxfee9EJCAgmEDlIUG4h--and so on
display: block;
width: 199px;
height: 66px;
}
.sprite-back {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYAAAADZCAYAAAApMec0AAAgAElEQVR4XuxdB2AUxfee9EJCAgmEDlIUG4h--and so on
display: block;
width: 34px;
height: 36px;
}
.sprite-thumbs-up {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYAAAADZCAYAAAApMec0AAAgAElEQVR4XuxdB2AUxfee9EJCAgmEDlIUG4h--and so on
display: block;
width: 32px;
height: 36px;
}
.sprite-thumbs-down {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYAAAADZCAYAAAApMec0AAAgAElEQVR4XuxdB2AUxfee9EJCAgmEDlIUG4h--and so on
display: block;
width: 32px;
height: 36px;
}
.sprite-share {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYAAAADZCAYAAAApMec0AAAgAElEQVR4XuxdB2AUxfee9EJCAgmEDlIUG4h--and so on
display: block;
width: 32px;
height: 32px;
}
.sprite-arrow {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYAAAADZCAYAAAApMec0AAAgAElEQVR4XuxdB2AUxfee9EJCAgmEDlIUG4h--and so on
display: block;
width: 25px;
height: 30px;
}
.sprite-deal-arrow {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYAAAADZCAYAAAApMec0AAAgAElEQVR4XuxdB2AUxfee9EJCAgmEDlIUG4h--and so on
display: block;
width: 19px;
height: 28px;
}

to a much more friendly:

.sprite {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYAAAADZCAYAAAApMec0AAAgAElEQVR4XuxdB2AUxfee9EJCAgmEDlIUG4hg
display: block;
}
.sprite-Facebook {
background-position: -2px -2px;
width: 115px;
height: 143px;
}
.sprite-Twitter {
background-position: -121px -2px;
width: 114px;
height: 143px;
}
.sprite-Mail {
background-position: -239px -2px;
width: 114px;
height: 143px;
}
.sprite-passbook {
background-position: -2px -149px;
width: 199px;
height: 66px;
}
.sprite-back {
background-position: -205px -149px;
width: 34px;
height: 36px;
}
.sprite-thumbs-up {
background-position: -243px -149px;
width: 32px;
height: 36px;
}
.sprite-thumbs-down {
background-position: -279px -149px;
width: 32px;
height: 36px;
}
.sprite-share {
background-position: -315px -149px;
width: 32px;
height: 32px;
}

Yes, it requires 2 classes instead of one, but that's hardly a downside compared to bloating your css with **megabytes** unnecessarily.