Upcoming features in lemonade

gistfile1.css

/*
 * 4 new mixins for sprite support in lemonade:
 * 
 * (1) Sprite classes
 * (2) Sprite classes with dimensions
 * (3) Sprite classes generated from folder
 * (4) Sprite classes with dimensions generated from folder
 * 
 * Source at: http://github.com/hagenburger/lemonade/blob/master/stylesheets/lemonade.scss
 * Don't forget to `gem install lemonade`
 */

@import "lemonade";

// (1) Sprite classes

// Source:
.my-class {
  @include sprite-image("sprites/coke.png");
}

// Result:
.my-class {
  background: url('sprites.png') no-repeat;
}


// (2) Sprite classes with dimensions

// Source:
.my-class {
  @include sized-sprite-image("sprites/coke.png");
}

// Result:
.my-class {
  background: url('sprites.png');
  height: 30px;
  width: 120px;
}


// (3) Sprite classes generated from folder

// Source:
@include sprite-folder("sprites");

// Result:
.sprites, .sprites-coke, .sprites-fanta {
  background: url('sprites.png') no-repeat;
}
.sprites-coke {
  background-position: 0 0;
}
.sprites-fanta {
  background-position: 0 -30px;
}


// (4) Sprite classes with dimensions generated from folder

// Source:
@include sized-sprite-folder("sprites");

// Result:
.sprites, .sprites-coke, .sprites-fanta {
  background: url('sprites.png');
}
.sprites-coke {
  background-position: 0 0;
  height: 30px;
  width: 120px;
}
.sprites-fanta {
  background-position: 0 -30px;
  height: 25px;
  width: 73px;
}