@extend cannot be used from within @media

[blainehansen]

Since almost the entire library uses @extend from within mixins, the mixins fail when called from within media directives.

I'd like to suggest a reversal of the current strategy, where the mixins call @extend. Instead, the @extends should call the mixins.

So from this:

%display-flex {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
@mixin display-flex() {
    @extend %display-flex;
}

to this:

@mixin display-flex() {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
%display-flex {
    @include display-flex();
}

[zessx]

Althought I would recommand to use Autoprefixer instead of Sass-flexbox, I think this is a really good idea, as it does not even change users' habits.
I'll take a little time to think about eventual regressions.

[zessx]

Fixed with 7aa9e06