diff --git a/templates/_icons.scss b/templates/_icons.scss index 61982cf..c9066a6 100644 --- a/templates/_icons.scss +++ b/templates/_icons.scss @@ -7,7 +7,7 @@ url('<%= fontPath %><%= fontName %>.svg#<%= fontName %>') format('svg'); } -%icon { +@mixin icon-styles { font-family: "<%= fontName %>"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; @@ -19,6 +19,10 @@ text-transform: none; } +%icon { + @include icon-styles; +} + @function icon-char($filename) { $char: ""; <% _.each(glyphs, function(glyph) { %> @@ -29,9 +33,13 @@ @return $char; } -@mixin icon($filename, $insert: before) { +@mixin icon($filename, $insert: before, $extend: true) { &:#{$insert} { - @extend %icon; + @if $extend { + @extend %icon; + } @else { + @include icon-styles; + } content: icon-char($filename); } } diff --git a/test/expected/_icons.scss b/test/expected/_icons.scss index 85d015a..9fbe64a 100644 --- a/test/expected/_icons.scss +++ b/test/expected/_icons.scss @@ -7,7 +7,7 @@ url('./Icons.svg#Icons') format('svg'); } -%icon { +@mixin icon-styles { font-family: "Icons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; @@ -19,6 +19,10 @@ text-transform: none; } +%icon { + @include icon-styles; +} + @function icon-char($filename) { $char: ""; @@ -32,9 +36,13 @@ @return $char; } -@mixin icon($filename, $insert: before) { +@mixin icon($filename, $insert: before, $extend: true) { &:#{$insert} { - @extend %icon; + @if $extend { + @extend %icon; + } @else { + @include icon-styles; + } content: icon-char($filename); } }