logicaroma
8/14/2013 - 11:41 PM

Two examples of sass modules for loading icons. one uses functions to automatically render css for the icons second includes %placeholder fo

Two examples of sass modules for loading icons. one uses functions to automatically render css for the icons second includes %placeholder for the generic styling of an icon

_icons-placeholder-mixin.scss
content_copyfile_download
@function icon-url($name) {
  @return url(‘/assets/images/icon-#{$name}.png’);
}

$icons: (open close message comment);

%icon {
  width: 32px;
  &:hover {
    opacity: 0.7;
  }
}

@each $icon in $icons {
  .icon-#{$icon} {
    background: icon-url($icon);
    @extend %icon;
  }
}
_icons-functions.scss
content_copyfile_download
//function to load icons images
@function icon-url($name) {
  @return url(‘/assets/images/icon-#{$name}.png’);
}
// var with icons 
$icons: (open close message comment);

//the functions which creates classes for the icons
@each $icon in $icons {
  .icon-#{$icon} {
    background: icon-url($icon);
    width: 32px;
    &:hover {
      opacity: 0.7;
    }
  }
}