Sass icon mixin doesn’t work with media queries

[miclf]

I came across an issue that, unfortunately, I contributed to create with the changes introduced in the bundled template via #11.

Now, when we try to call the icon mixin inside a @mediadirective, we get the following error:

error assets/sass/main.scss (Line 10 of assets/sass/partials/_icons.scss: You may not @extend an outer selector from within @media.
You may only @extend selectors within the same directive.

The cause is the use of the @extend directive inside the mixin.

Reverting #11 would solve the issue but would also remove the ability to greatly improve the size of the output CSS… I think we could find a compromise.

Adding an additional parameter to the mixin could allow to explicitly opt out from @extends and would make everything work again with media queries. It could look like that:

@mixin icon($filename, $insert: before, $selector: extend) {
    &:#{$insert} {
        @if ($selector == 'extend') {
            @extend %icon;
        } @else {
            font-family: "icons";
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            font-style: normal;
            font-variant: normal;
            font-weight: normal;
            // speak: none; // only necessary if not using the private unicode range (firstGlyph option)
            text-decoration: none;
            text-transform: none;
        }
        content: icon-char($filename);
    }
}

To be honest, this doesn’t look really elegant to me (it duplicates the style of the %icon placeholder selector) but this is the best solution I could think of.

Does anybody have a better idea or any suggestion?

[backflip]

Hey, I'm sorry about the delay.
The additional parameter is usually how I handle things, too. I will extend the template accordingly when taking care of #9 .

[backflip]

Fixed in 1.0.0.