Doug Cassidy Doug Cassidy - 3 months ago 21
Sass (Sass) Question

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

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

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