How-to Compass & flexbox：让它输出所有旧版本和前缀？

Question

我在 PC 版 5.1 版 Safari 和 Mac 版 Safari 上遇到问题（细节未知）。所以我想找出最兼容的 flexbox 显示是什么。

我试试这个：

.d_flex_grid{
    @include flexbox(( display: flex ));
}
.d_flex_grid1{
    @include flexbox(( display: flex ), $version: 1);
}
.d_flex_grid2{
    @include flexbox(( display: flex ), $version: 2);
}
.d_flex_grid3{
    @include flexbox((display: flex), $version: 3);
}

我明白了：

.d_flex_grid {
  display: -webkit-flex;
  display: flex; }

.d_flex_grid1 {
  display: -moz-flex;
  display: -webkit-flex; }

.d_flex_grid2 {
  display: -ms-flex; }

.d_flex_grid3 {
  display: flex; }

我要的是https://css-tricks.com/using-flexbox/:

  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */

或者更多 cross/legacy 浏览器。指南针是为此设置的，还是我应该自己滚动？

Answer 1

这应该给你你想要的（罗盘 >= 1）：

.d_flex_grid {
  @include flexbox((display: box), $version: 1);
  @include flexbox((display: flexbox), $version: 2);
  @include display-flex;
}

输出：

.d_flex_grid {
  display: -moz-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

How-to Compass & flexbox：让它输出所有旧版本和前缀？

How-to Compass & flexbox: make it output all the legacy versions and prefixes?

sass

flexbox

compass-sass

compass