Skip to content

Instantly share code, notes, and snippets.

@logicaroma
Created August 14, 2013 23:41
Show Gist options
  • Save logicaroma/6236938 to your computer and use it in GitHub Desktop.
Save logicaroma/6236938 to your computer and use it in GitHub Desktop.
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
//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;
}
}
}
@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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment