SASS / Compass Mixin para Flexbox (novo e antigo)

Flexbox é incrível , e acho triste que muitos desenvolvedores não o estejam usando. As razões variam de “é muito difícil” a “ainda não é totalmente compatível” e “Não quero oferecer suporte às duas especificações!” Bem, eu facilitei bastante para você.

Eu construí um mixin SASS / Compass (bem, uma série de mixins) que permite a um desenvolvedor construir facilmente um layout flexbox usando a nova sintaxe que irá traduzir automaticamente seus valores para o formato legado para suportar navegadores que ainda não alcançaram o a especificação . É tão simples como:

.container {
@include flexcontainer;
}
.child {
@include flexchild;
}

Claro que existem muitas propriedades configuráveis ​​e um flexprop()mixin auxiliar para propriedades únicas. O mixin criará todo o código necessário para suporte legado e traduzirá as propriedades baseadas em especificações nas estranhas propriedades proprietárias do IE.