Merge pull request #27 from backflip/feature/scss-optimizations

Issue #15: Fix scss template to work with media queries
backflip · Aug 2, 2015 · efc434b · efc434b
2 parents 068c088 + a9e248c
commit efc434b
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 6 deletions.
diff --git 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
@@ -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);
 	}
 }