by
4,027 19
1
5
2,945
1
Top 1% !
Famous
Tagged
Specified
MultiPlatform
Popularity: 5024th place
LanguageCSS
LanguageSASS
LanguageSCSS
LicenseMIT_X11

@each Sass Directive - processing icons

A nice DRY approach to writing your huge icon collection into stylesheets
Copy Embed Code
<iframe id="embedFrame" style="width:600px; height:300px;"
src="https://www.snip2code.com/Embed/1255533/-each-Sass-Directive---processing-icons?startLine=0"></iframe>
Click on the embed code to copy it into your clipboard Width Height
Leave empty to retrieve all the content Start End
// @each Sass Directive $icon-names: (twitter '\e004' ), (facebook '\e005' ), (gplus '\e006' ); %ico-font-base { font-family: 'ico-fonts'; speak: none; font-style: normal; font-weight: normal; line-height: 1; text-transform: none; //Better Font Rendering -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @each $icon-name in $icon-names { .icon-#{nth($icon-name, 1)}:after { @extend %ico-font-base; content: nth($icon-name, 2); } }
If you want to be updated about similar snippets, Sign in and follow our Channels

blog comments powered by Disqus