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

Question

I had an issue with Safari, on pc, vers 5.1, and also Safari on Mac (unknown details). So I'm trying to figure out what the most compatible flexbox display is.

I try this:

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

I get this:

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

What I want is 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+ */

Or something even more cross/legacy browser. Is compass set up to do this, or should I roll my own?

Answer 1

This should give you what you want (Compass >= 1):

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

Output:

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