Skip to content

Instantly share code, notes, and snippets.

@jareware jareware/gist.md
Last active Jun 7, 2018

Embed
What would you like to do?
Backporting Compass flexbox mixins from bleeding-edge (0.13.alpha.4) to current stable (0.12.2)

⇐ back to the gist-blog at jrw.fi

New Compass flexbox mixins

The current Compass bleeding-edge (0.13.alpha.4) contains awesome new flexbox mixins that allow you to generate styling for all three (!) past and current specifications. See http://css-tricks.com/using-flexbox/ for the details behind the careful interweaving of different properties and prefixes, but the beef is support for:

  • Chrome any
  • Firefox any
  • Safari any
  • Opera 12.1+
  • IE 10+
  • iOS any
  • Android any

Getting some

The new flexbox module can be found at:

https://github.com/chriseppstein/compass/blob/master/frameworks/compass/stylesheets/compass/css3/_flexbox.scss

and can be backported to current Compass stable (0.12.2) quite conveniently. This way you can enjoy the new goodies without having to upgrade to a less stable Compass altogether.

_flexbox.scss can be included into your project just like any other partial. Only the @import "shared"; needs to be changed to @import "compass/css3/shared"; so the file compiles.

Due to a recent tiny change in Compass internals you have to preconfigure some variables before importing:

$flex-support:    not -moz, -webkit, not -o, not -ms, not -khtml;
$flexbox-support: not -moz, -webkit, not -o,     -ms, not -khtml, not standard;
$box-support:         -moz, -webkit, not -o, not -ms, not -khtml, not standard;

$flex-legacy-enabled: true;

@import "flexbox";

The first three make the new partial compatible with the older Compass experimental-helpers, and the fourth enables style output for current Firefox, Safari et al.

Using some

At this point, generating flexboxes is as easy as pie:

.row {
    @include display-flex(flex);
    width: 100%; // at least Firefox seems to want this *shrug*
    .cell {
        &:nth-child(1) {
            width: 100px; // this is the actual width of the first column
        }
        &:nth-child(2) {
            @include flex(1);
            width: 100px; // this dimension is ignored, but needed by at least Safari to work
        }
        &:nth-child(3) {
            @include flex(2);
            width: 100px; // same as above
        }
    }
}

This will render as a fixed-width first column, with leftover space divided 1-to-2 between the remaining two columns.

Caveats

...are there. And the closer you get to the more tricky bits of flexbox layout you'll likely run into more issues. A few that I already ran into:

  • The current stable Firefox (20.0) still uses display: box, which is a bit buggy. Fox example, if the contents of a flex-item are updated dynamically, the size isn't recalculated properly. There might be a JS workaround, but Firefox 22 (currently in the Aurora channel, slated for release around 2013-06-25) already uses the latest flexbox spec, and this Just Works (tm). The new spec can also be already enabled in the current stable by setting layout.css.flexbox.enabled to true in about:config.
  • Similarly, in the current stable Firefox, flex-items are mis-sized if they have overflowing content and overflow: ellipsis;.

So there's some bork.

That said, even the simple layout defined above - which already works taking the above bork into account - is already more capable than a float-based equivalent (automatic & equal heights for all cells, for instance). Flexbox definitely is the way forward with complex app-like UI's with responsive aspects, so if you can live with the current browser support, this is good stuff!

Kudos to cimmanon for contributing these to Compass next!

![GA](https://ssl.google-analytics.com/__utm.gif?utmwv=5.4.3&utmn=34402&utmhn=gist.github.com&utmdt=Backporting%20Compass%20flexbox%20mixins%20from%20bleeding-edge%20(0.13.alpha.4\)%20to%20current%20stable%20(0.12.2\)&utmr=-&utmp=%2Fjareware%2F5526866&utmac=UA-42176157-3&utmcc=__utma%3D1.1828258468.1374783534.1374783534.1374783534.1%3B%2B__utmz%3D1.1374783534.1.1.utmcsr%3D(direct\)%7Cutmccn%3D(direct\)%7Cutmcmd%3D(none\)%3B)

@jtwalters

This comment has been minimized.

Copy link

jtwalters commented Sep 25, 2013

@railsnerd

This comment has been minimized.

Copy link

railsnerd commented Oct 14, 2013

Super excited to see this happening, thank you!

Two questions though:

  • Get error application.scss (Line 10: Invalid CSS after " display": expected ")", was ": flex, ")

    @include flexbox((
    display: flex,
    flex-direction: column,
    ));

That error feels like it isn't understanding the named arguments syntax? Even though I have Sass 3.2.12

  • With Compass 0.13.alpha.4 why can't I @include 'flexbox'? It cannot find the file
@rachelmflowers

This comment has been minimized.

Copy link

rachelmflowers commented Nov 24, 2013

@railsnerd, that is not the mixin for flexbox if you want to use flexbox you have to do something like this: #yourcontainerdiv { @include display-flex(flex); @include flex-direction(column); }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.