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.