Sass mixins para fallback y debug de flexbox
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.
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.
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
.