CSS flexbox SASS mixin, который не поддерживает наследие flexbox

Question

Есть ли способ поддержки браузеров без устаревшего flexbox (IE) при использовании миксинов SASS?

Я использую ниже миксины для быстрой реализации display:flex.Хотя у меня есть некоторые проблемы с IE, так как я должен нацеливаться на каждый класс, который я использовал, используя mixin, чтобы переключить его на display:table и display:table-cell, используя modernizr , поскольку display:flex не полностьюподдерживается в некоторых браузерах.

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

В любом случае могу ли я выполнить кондиционирование своего миксина, если он внутри body с классом flexboxlegacy или no-flexboxlegacy?

Answer 1

@mixin flexbox() {
  display: flex;

  .no-flexboxlegacy & {
    display: table;
  }
}

a b c {
  @include flexbox();
}

Компилируется в:

a b c {
  display: flex;
}

.no-flexboxlegacy a b c {
  display: table;
}