//======== mixin and functions =========//
//(initializtion below)

@function divideEscape0($a,$b){
  @if ($b ==0){@return 0}
  @return $a/$b;
}
@function getImagePositionFromSprite($iconName,$sprite-name,$columns,$rows){
  $index: index($sprite-name,$iconName);
  $row: ceil($index/$columns);
  $column: $index % $columns;
  @return percentage(divideEscape0(1,($columns - 1))*($column - 1)) percentage(divideEscape0(1,($rows - 1))*($row - 1));
}

@mixin backgroundImageBySprite($sprite,$name,$size){
  background-image: url(map_get($sprite,url));
  background-position: getImagePositionFromSprite(
          $name,
          map_get($sprite,names),
          map_get($sprite,columns),
          map_get($sprite,rows)
  );
  height: $size;
  width: $size;
  background-size: auto $size * (map_get($sprite,rows));
}

//end of mixin//
//===================================//



//===================================//
//initializtion// 

//1. create a sprite of square images
$spriteImageExample:'http://www.caltronics.info/images/unused/social-icons.example.png'; 
//is should be pixel-perfect!!


//2. define sass map with the keys specified:
$mySprite:(
    url:$spriteImageExample, 
    names: (
      'facebook', 'twitter', 'youtube','instagram','linkedin','tumblr','google+','facebookGray', 'twitterGray', 'youtubeGray','instagramGray','linkedinGray','tumblrGray','google+Gray'
    ),  //names of all of the icons in sprite
    columns: 7,   //sprite structure
    rows: 2
);
 
//3. use it like this:
.selector{
  @include backgroundImageBySprite($mySprite,'linkedinGray',60px)    
    //try changing to other icons
}

//you can create a mixin for more convenience:

@mixin social-icon($name,$size){
  @include backgroundImageBySprite($mySprite,$name,$size)
}

 .selector2{
  @include social-icon('google+',30px)    
}
.selector3{
  @include social-icon('facebook',80px)     
}
//=======================================//



//======= some styling for code pen ========//
html{
  background-color:rgb(255, 230, 241);
    color:  #023581;
}
.display{
  h1{
      text-align: center;
  color: rgb(255, 230, 241);
  background-color: rgb(115, 171, 255);
  line-height: 60px;
  }
}
.steps{
  height: 100%;
  display: flex;
  .step{
    flex-basis: 25%; 
    overflow: auto;
      margin-right: 15px;
  padding: 13px;
  background-color: rgba(115, 171, 255, 0.5);
    h5{
      margin: 0;
      text-decoration: underline;
    }
  }
}
.sprite-demo{
  width: 300px;
  height: 85px;
  background-size: auto 85px;
  background-image: url($spriteImageExample);
    display: inline-block;
}
code{
  background-color:rgb(222, 222, 222);
  color:black;
  padding:5px;
  display:block;
  bold{
  font-weight: 900;
  margin-left: 20px;
}
} 
.gray{
  color:gray;
}
.frame{
  background-color: #000;
  padding: 20px;
}
.selector3,.selector2{
  margin-top: 10px;
}