Stripe SASS

Usage

1. Create a sprite of square images (if the icon is not square, save it inside a square anyway) example

2. Define sass map with the keys specified:

$mySprite:(
  url: '../images/mySprite.png', 
  names: ('createIcon','player','bell', ...),  // names of all of the icons in sprite
  itemsInRow: 10,  //sprite structure
  numOfRows: 2
);

1. Use it like this:

.selector{
  // sprite, name of the item, size (width and height)
  // note that adding percentage should be in a square parent parent
  @include backgroundImageBySprite($mySprite,'bell',30px)  
}

You may also load all icons directly by doing:

@include loadSpriteClasses($mySprite,'icon',30px)  

See https://codepen.io/yonatanmn/pen/LVdyYx for working demo.