Sprites Mixin For Sass (scss)

index.html

<div class='display'>
  <h1>Sprites Mixin For Sass</h1>
  <h2>Usage</h2>
  <div class="steps">

    <div class="step">
      <h4>1. Create a sprite of square images </h4>
      <p>
        <span>If the icon is not square, save it inside a square anyway.</span>
        <br/> should be pixel perfect!

      </p>
      <div class='sprite-demo'></div>
    </div>

    <div class="step">
      <h4>2. Define sass map with the specified keys </h4>
      <code>
        $mySprite:(<br/>  <bold>url:</bold> '../images/mySprite.png', <br/>
        <bold>names:</bold>('facebook', 'twitter', 'youtube', 'instagram', ... 'facebookGray','twitterGray'...),<br/>
        <bold>columns:</bold> 7,<br/>
        <bold>rows:</bold> 2<br/>
        );
    </code>
    </div>

    <div class="step">
      <h4>3. Use it like this: </h4>
      <code>.selector{<br/>
        <bold>@include</bold> backgroundImageBySprite( $mySprite, 'linkedinGray', 30px)<br/>     
        }<br/>
      </code>
      <p>
        <h5>arguments: </h5> sprite map, <span class='gray'> ($mySprite)</span>
        <br/> name of icon,<span class='gray'> (one of $mySprite.names)</span>
        <br/> desired size <span class='gray'>(if it's in percentage, it should be set in a square parent)</span>
      </p>
    </div>

    <div class="step">
      <h4>4. Result: </h4>
      <div class="frame">
        <div class="selector"></div>
        <div class="selector2"></div>
        <div class="selector3"></div>
      </div>
    </div>

  </div>
</div>

Sprites Mixin For Sass (scss).markdown

Sprites Mixin For Sass (scss)

Really conveninet mixin for using css sprites, no need to start messing with background position.

A Pen by yonatanmn on CodePen.

License.

style.css

//1. 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
}
 .selector2{
  @include backgroundImageBySprite($mySprite,'google+',30px)    
}
.selector3{
  @include backgroundImageBySprite($mySprite,'twitter',80px)     
}
//=======================================//



//======= some styling for code pen ========//
html{
  background-color:rgb(255, 230, 241);
    color: rgb(2, 53, 129);
}
.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%; 
    
    margin-right:20px;
    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;
}