Below is a piece of Sass code which is ~50 lines of code.
What it does...
- Uses a Sass loop
- Which uses Sass interpolation
- Which also uses a Sass extend
- Which itself uses another Sass extends
- Which itself includes a Sass mixin
- And also a native Sass function
- And a custom Sass function (to do some calculations)
...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));
}
}