« Back to Index

Over engineered Sass…

View original Gist on GitHub

gistfile1.md

Below is a piece of Sass code which is ~50 lines of code.

What it does…

…all this code (not to mention the mental stress it causes trying to decipher it) for effectively creating 7 unique classes.

That is just mental!

// Live icons
// Usage: `.icon-email`, `.icon-tweet`… in HTML
// Sprite: live-sprite.png

// Space between the icons in the sprite
$icon-spacing-in-sprite: 100px;

// Space before the first icon
$first-icon-vertical-offset: 8px;

// Name of the class (usually the entry type)
// followed by its position in the sprite
// Usage: `(tweet, 0)` = First pictogram is a tweet icon
$live-icons: (tweet,    0),
             (email,    1),
             (quote,    2),
             (blog,     2),
             (sms,      3),
             (comment,  4),
             (facebook, 5);


// Abstraction for image replacement
// Based on @necolas work and made
// more robust for older browsers
%image-replace {
  display: block;
  height: 0;
  overflow: hidden;
  text-indent: 150%;
  font: normal 0/0 a;
  color: transparent;
}

// Common rules for all live icons
%live-icon {
  @extend %image-replace;
  width: 32px;
  padding-top: 32px;
  background: url('../../../img/live-sprite.png') no-repeat;
  @include hidpi {
    background-image: url('../../../img/live-sprite_x2.png');
    background-size: 32px;
  }
}

@function live-icon-background-position($i) {
  @return $i * $icon-spacing-in-sprite * -1 - $first-icon-vertical-offset;
}

// Outputs all icon classes based on the $live-icons list
// `.icon-tweet`, `.icon-email`
@each $icon in $live-icons {
  .icon-#{nth($icon, 1)} {
    @extend %live-icon;
    background-position: 0 live-icon-background-position(nth($icon, 2));
  }
}