Sass mixins para fallback y debug de flexbox

El uso de fallbacks para flexbox ha quedado obsoleto, ya que todos los navegadores modernos lo soportan, quizás pueda servir si hay que dar soporte a navegadores antíguos

He creado unos mixins, de esos que espero poder de dejar de usar en breve, que con la ayuda de Modernizr, o no, me ayudan a trabajar con flexbox, dar fallback a navegadores que no lo soporten y poder verificar el "fallback" sin necesidad de cambiar de navegador.

Demo en codepen

Los mixins

Son dos mixins, uno donde inserto el código para navegadores que soporten flexbox y otro para añadir el "fallback".

Normalmente uso Modernizr para determinar si el navegador soporta flexbox, pero también se puede utilizar @supports. El uso de cada método depende de si las propiedades usadas para el "fallback" afectan o no a la versión en flexbox, si afecta mejor usar Modernizr.

Actualización. Modernizr da un falso positivo en IE10 he buscado una característica con un soporte similar a flexbox para porder dar fallback, en este caso he elegido @support

Cuando se soporta flexbox

Con modernizr.

@mixin flexbox($active:true) {
    @if($active == true) {
        @content;
    }
}

Con @supports.

@mixin flexbox($active:true) {
    @if($active == true) {
        @supports (display: flex) {
            @content;
        }
    }
}

Fallback

Con modernizr.

@mixin no_flexbox($active:true) {
    @if($active == true){
        .no-supports & {
            @content;
        }
    } @else {
        .supports & {
            @content;
            border: 1px solid tomato !important;
        }
    }
}

Con @supports.

@mixin no_flexbox($active:true){
    @if($active == true){
        @content;
    } @else {
        @content;
        border: 1px solid tomato !important;
    }
}

Uso

> ul { 
    @include flexbox(true) {
        display: flex;
    }

    @include no-flexbox(true) {
        li{
            display: inline-block;
        }
    }
}

Simplemente hay que insertar el código correspondiente en cada mixin. El parámetro true determina que ambos mixins están "activados" ¿y eso para que sirve? si cambiamos a ambos mixins a false podemos ver como actua el fallback, he añadido una ayuda visual border: 1px solid tomato para asegurarme de que no quedan los mixins en false.