css - CSS flexbox SASS mixin，不支持 flexbox legacy

Question

有没有办法在使用 SASS mixins 时支持没有 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 进行条件处理，如果它在bodya 类的flexboxlegacyor中no-flexboxlegacy？

标签： cssinternet-explorersassflexbox

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;
}