不支持旧版Flexbox的CSS flexbox SASS mixin

Question

是否可以在使用SASS mixins的情况下支持不带flexbox legacy（IE）的浏览器？

我正在使用下面的mixin快速实现display:flex。尽管我在IE上存在一些问题，但是由于我必须针对使用mixin的每个类，所以必须使用modernizr将其切换为display:table和display:table-cell，因为{{1} }在某些浏览器上不受完全支持。

display:flex

如果我的mixin在@mixin flexbox() { display: -webkit-box !important; display: -moz-box !important; display: -ms-flexbox !important; display: -webkit-flex !important; display: flex !important; } 或body类的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;
}