不支持 flexbox 遗留的 CSS flexbox SASS mixin

Question

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

我正在使用下面的 mixin 来快速实现 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;
}

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