CSS flexbox SASS mixin，不支持 flexbox legacy

Question

有没有办法在使用 SASS mixins 时支持没有 flexbox legacy(IE) 的浏览器？

我正在使用下面的 mixin 来快速实现 display:flex。虽然我对 IE 有一些问题，但因为我必须针对使用 mixin 的每个类来使用 modernizr 将其切换到 display:table 和 display:table-cell，因为某些浏览器不完全支持 display:flex .

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

如果我的 mixin 在 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;
}