指南针和 flexbox：使其输出所有旧版本和前缀？答案

【问题标题】：How-to Compass & flexbox: make it output all the legacy versions and prefixes?指南针和 flexbox：使其输出所有旧版本和前缀？
【发布时间】：2016-09-06 03:22:06
【问题描述】：

我在 Safari 上遇到问题，在 pc 上，版本 5.1 以及 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+ */

或者更多的跨/旧版浏览器。指南针是否设置为执行此操作，还是我应该自己滚动？

【问题讨论】：

你考虑过autoprefixer吗？
是的，但我不想在我的流程中添加另一个步骤，而且，总的来说，只滚动我自己的 flexbox() mixin 会更容易。我可以在几秒钟内完成，但我想尽可能地使用指南针。而且，还会有更多这样的，使用 flexbox 的不同部分。

标签： sass flexbox compass-sass compass

【解决方案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;
}

【讨论】：