flex-box.sass

// Original gist https://gist.github.com/280797

$prefixes: -webkit- -moz- -ms- -o- !default

=prefix($property, $value, $prefixes)
  @each $prefix in $prefixes
    #{$prefix}#{$property}: $value
  #{$property}: $value

=prefix-value($property, $value, $prefixes)
  @each $prefix in $prefixes
    #{$property}: #{$prefix}$value
  #{$property}: $value

=display-box($property: display-box, $value: box)
  +prefix-value($property, $value)

//  Value:    horizontal | vertical | inline-axis | block-axis | inherit
//  Initial:  inline-axis
//  Default:  horizontal
=box-orient($property: box-orient, $value: horizontal)
  +prefix($property, $value)

//  Value:    normal | reverse | inherit
//  Initial:  normal
//  Default:  reverse
=box-direction($property: box-direction, $value: reverse)
  +prefix($property, $value)

//  Value:    <integer>
//  Initial:  1
//  Default:  2
=box-ordinal-group($property: box-ordinal-group, $value: 2)
  +prefix($property, $value)

//  Value:    start | end | center | baseline | stretch
//  Initial:  stretch
//  Default:  start
=box-align($property: box-align, $value: start)
  +prefix($property, $value)

//  Value:    <number>
//  Initial:  0.0
//  Default:  1
=box-flex($property: box-flex, $value: 1)
  +prefix($property, $value)

//  Value:    <integer>
//  Initial:  1
//  Default:  2
=box-flex-group($property: box-flex-group, $value: 2)
  +prefix($property, $value)

//  Value:    start | end | center | justify
//  Initial:  start
//  Default:  center
=box-pack($property: box-pack, $value: center)
  +prefix($property, $value)

//  I don't see this working in any browser currently...
//  Value:    single | multiple
//  Initial:  single
//  Default:  multiple
=box-lines($property: box-lines, $value: multiple)
  +prefix($property, $value)