Useful CSS prefixes

_prefix.sass

@mixin box-sizing($value)
  -moz-box-sizing: $value
  box-sizing: $value


@mixin hyphens
  -webkit-hyphens: auto
  -moz-hyphens: auto
  -ms-hyphens: auto
  hyphens: auto


@mixin display-flex
  display: -webkit-box
  display: -moz-box
  display: -ms-flexbox
  display: -webkit-flex
  display: flex

@mixin display-inline-flex
  display: -webkit-inline-box
  display: -moz-inline-box
  display: -ms-inline-flexbox
  display: -webkit-inline-flex
  display: inline-flex

@mixin flex-direction($value)
  @if $value == row
    -webkit-box-orient: horizontal
    -webkit-box-direction: normal
    -moz-box-orient: horizontal
    -moz-box-direction: normal
    -ms-flex-direction: row
    -webkit-flex-direction: row
    flex-direction: row
  @else if $value == row-reverse
    -webkit-box-orient: horizontal
    -webkit-box-direction: reverse
    -moz-box-orient: horizontal
    -moz-box-direction: reverse
    -ms-flex-direction: row-reverse
    -webkit-flex-direction: row-reverse
    flex-direction: row-reverse
  @else if $value == column
    -webkit-box-orient: vertical
    -webkit-box-direction: normal
    -moz-box-orient: vertical
    -moz-box-direction: normal
    -ms-flex-direction: column
    -webkit-flex-direction: column
    flex-direction: column
  @else if $value == column-reverse
    -webkit-box-orient: vertical
    -webkit-box-direction: reverse
    -moz-box-orient: vertical
    -moz-box-direction: reverse
    -ms-flex-direction: column-reverse
    -webkit-flex-direction: column-reverse
    flex-direction: column-reverse

@mixin flex-wrap($value)
  @if $value == wrap
    -webkit-box-lines: multiple
    -moz-box-lines: multiple
    -ms-flex-wrap: wrap
    -webkit-flex-wrap: wrap
    flex-wrap: wrap
  @if $value == wrap-reverse
    // -webkit-box-lines:
    // -moz-box-lines:
    -ms-flex-wrap: wrap-reverse
    -webkit-flex-wrap: wrap-reverse
    flex-wrap: wrap-reverse
  @else if $value == nowrap
    -webkit-box-lines: single
    -moz-box-lines: single
    -ms-flex-wrap: none
    -webkit-flex-wrap: nowrap
    flex-wrap: nowrap

@mixin order($value)
  -webkit-box-ordinal-group: $value + 1
  -moz-box-ordinal-group: $value + 1
  -ms-flex-order: $value
  -webkit-order: $value
  order: $value

@mixin flex($values)
  -webkit-box-flex: $values
  -moz-box-flex: $values
  -webkit-flex: $values
  -ms-flex: $values
  flex: $values

@mixin justify-content($value)
  @if $value == center
    -webkit-box-pack: center
    -moz-box-pack: center
    -ms-flex-pack: center
    -webkit-justify-content: center
    justify-content: center
  @else if $value == flex-end
    -webkit-box-pack: end
    -moz-box-pack: end
    -ms-flex-pack: end
    -webkit-justify-content: flex-end
    justify-content: flex-end
  @else if $value == flex-start
    -webkit-box-pack: start
    -moz-box-pack: start
    -ms-flex-pack: start
    -webkit-justify-content: flex-start
    justify-content: flex-start
  @else if $value == space-around
    // -webkit-box-pack:
    // -moz-box-pack:
    // -ms-flex-pack:
    -webkit-justify-content: space-around
    justify-content: space-around
  @else if $value == space-between
    // -webkit-box-pack:
    // -moz-box-pack:
    // -ms-flex-pack:
    -webkit-justify-content: space-between
    justify-content: space-between

@mixin align-items($value)
  @if $value == baseline
    -webkit-box-align: baseline
    -moz-box-align: baseline
    -ms-flex-align: baseline
    -webkit-align-items: baseline
    align-items: baseline
  @else if $value == center
    -webkit-box-align: center
    -moz-box-align: center
    -ms-flex-align: center
    -webkit-align-items: center
    align-items: center
  @else if $value == flex-end
    -webkit-box-align: end
    -moz-box-align: end
    -ms-flex-align: end
    -webkit-align-items: flex-end
    align-items: flex-end
  @else if $value == flex-start
    -webkit-box-align: start
    -moz-box-align: start
    -ms-flex-align: start
    -webkit-align-items: flex-start
    align-items: flex-start
  @else if $value == stretch
    -webkit-box-align: stretch
    -moz-box-align: stretch
    -ms-flex-align: stretch
    -webkit-align-items: stretch
    align-items: stretch

@mixin align-self($value)
  @if $value == auto
    -ms-flex-item-align: auto
    -webkit-align-self: auto
    align-self: auto
  @else if $value == baseline
    -ms-flex-item-align: baseline
    -webkit-align-self: baseline
    align-self: baseline
  @else if $value == center
    -ms-flex-item-align: center
    -webkit-align-self: center
    align-self: center
  @else if $value == flex-end
    -ms-flex-item-align: end
    -webkit-align-self: flex-end
    align-self: flex-end
  @else if $value == flex-start
    -ms-flex-item-align: start
    -webkit-align-self: flex-start
    align-self: flex-start
  @else if $value == stretch
    -ms-flex-item-align: stretch
    -webkit-align-self: stretch
    align-self: stretch

@mixin align-content($value)
  @if $value == auto
    -ms-flex-line-pack: auto
    -webkit-align-content: auto
    align-content: auto
  @else if $value == baseline
    -ms-flex-line-pack: baseline
    -webkit-align-content: baseline
    align-content: baseline
  @else if $value == center
    -ms-flex-line-pack: center
    -webkit-align-content: center
    align-content: center
  @else if $value == flex-end
    -ms-flex-line-pack: end
    -webkit-align-content: flex-end
    align-content: flex-end
  @else if $value == flex-start
    -ms-flex-line-pack: start
    -webkit-align-content: flex-start
    align-content: flex-start
  @else if $value == stretch
    -ms-flex-line-pack: stretch
    -webkit-align-content: stretch
    align-content: stretch


@mixin position-sticky
  position: -webkit-sticky
  position: -moz-sticky
  position: -ms-sticky
  position: sticky


@mixin transition($values)
  -webkit-transition: $values
  -moz-transition: $values
  -ms-transition: $values
  transition: $values

Shouldn't position: position-sticky say position: sticky instead?

@dividedmind: Right. Thanks.