Sass prefix mixins

// placeholder
=optional-at-root($sel)
    @at-root #{if(not &, $sel, selector-append(&, $sel))}
        @content
=placeholder
    +optional-at-root('::-webkit-input-placeholder')
        @content
    +optional-at-root(':-moz-placeholder')
        @content
    +optional-at-root('::-moz-placeholder')
        @content
    +optional-at-root(':-ms-input-placeholder')
        @content

// box-sizing
=box-sizing($value)
    -webkit-box-sizing: $value
    -moz-box-sizing: $value
    box-sizing: $value

// filter
=filter($value)
    -webkit-filter: $value
    -ms-filter: $value
    filter: $value

// flexbox
=flexbox
    display: -webkit-box
    display: -webkit-flex
    display: -ms-flexbox
    display: flex
=inline-flex
    display: -webkit-inline-box
    display: -webkit-inline-flex
    display: -ms-inline-flexbox
    display: inline-flex

// flex-direction
=flex-row
    -webkit-box-orient: horizontal
    -webkit-box-direction: normal
    -ms-flex-direction: row
    flex-direction: row
=flex-row-reverse
    -webkit-box-orient: horizontal
    -webkit-box-direction: reverse
    -ms-flex-direction: row-reverse
    flex-direction: row-reverse
=flex-column
    -webkit-box-orient: vertical
    -webkit-box-direction: normal
    -ms-flex-direction: column
    flex-direction: column
=flex-column-reverse
    -webkit-box-orient: vertical
    -webkit-box-direction: reverse
    -ms-flex-direction: column-reverse
    flex-direction: column-reverse

// flex-wrap
=flex-wrap
    -ms-flex-wrap: wrap
    flex-wrap: wrap
=flex-wrap-reverse
    -ms-flex-wrap: wrap-reverse
    flex-wrap: wrap-reverse
=flex-nowrap
    -ms-flex-wrap: nowrap
    flex-wrap: nowrap

// justify-content
=justify-content-start
    -webkit-box-pack: start
    -ms-flex-pack: start
    justify-content: flex-start
=justify-content-end
    -webkit-box-pack: end
    -ms-flex-pack: end
    justify-content: flex-end
=justify-content-center
    -webkit-box-pack: center
    -ms-flex-pack: center
    justify-content: center
=justify-content-between
    -webkit-box-pack: justify
    -ms-flex-pack: justify
    justify-content: space-between

// align-items
=align-items-start
    -webkit-box-align: start
    -ms-flex-align: start
    align-items: flex-start
=align-items-end
    -webkit-box-align: end
    -ms-flex-align: end
    align-items: flex-end
=align-items-center
    -webkit-box-align: center
    -ms-flex-align: center
    align-items: center
=align-items-stretch
    -webkit-box-align: stretch
    -ms-flex-align: stretch
    align-items: stretch

// align-self
=align-self-start
    -webkit-align-self: start
    -ms-flex-item-align: start
    align-self: flex-start
=align-self-end
    -webkit-align-self: end
    -ms-flex-item-align: end
    align-self: flex-end

// flex-shrink
=flex-shrink($value)
    -webkit-flex-shrink: $value
    -moz-flex-shrink: $value
    -ms-flex-negative: $value
    flex-shrink: $value

// flex-grow
=flex-grow($value)
    -webkit-box-flex: $value
    -webkit-flex-grow: $value
    -moz-flex-grow: $value
    -ms-flex-positive: $value
    flex-grow: $value

// flex-grow
=flex-basis($value)
    -webkit-flex-basis: $value
    -moz-flex-basis: $value
    -ms-flex-preferred-size: $value
    flex-basis: $value

// flex
=flex($value)
    -webkit-box-flex: $value
    -ms-flex: $value
    flex: $value

// vertical gradient
=vertical-gradient($colors...)
    background-image: -webkit-linear-gradient(top, $colors)
    background-image: -moz-linear-gradient(top, $colors)
    background-image: -o-linear-gradient(top, $colors)
    background-image: -ms-linear-gradient(top, $colors)
    background-image: linear-gradient(to bottom, $colors)

// horizontal gradient
=horizontal-gradient($colors...)
    background-image: -webkit-linear-gradient(left, $colors)
    background-image: -moz-linear-gradient(left, $colors)
    background-image: -o-linear-gradient(left, $colors)
    background-image: -ms-linear-gradient(left, $colors)
    background-image: linear-gradient(to right, $colors)

// radial gradient
=radial-gradient($colors...)
    background-image: -webkit-radial-gradient($colors)
    background-image: -moz-radial-gradient($colors)
    background-image: -o-radial-gradient($colors)
    background-image: radial-gradient($colors)

// rotate gradient
// example: +rotate-gradient(-45, 135, #000, #fff)
=rotate-gradient($deg1, $deg2, $colors...)
    background-image: -webkit-linear-gradient(#{$deg1}deg, $colors)
    background-image: -moz-linear-gradient(#{$deg1}deg, $colors)
    background-image: -o-linear-gradient(#{$deg1}deg, $colors)
    background-image: -ms-linear-gradient(#{$deg1}deg, $colors)
    background-image: linear-gradient(#{$deg2}deg, $colors)

// box shadow
=box-shadow($content...)
    -webkit-box-shadow: $content
    -moz-box-shadow: $content
    box-shadow: $content

// generic transform
=transform($transforms)
    -moz-transform: $transforms
    -o-transform: $transforms
    -ms-transform: $transforms
    -webkit-transform: $transforms
    transform: $transforms

// rotate
=rotate ($deg)
    +transform(rotate(#{$deg}deg))

// scale
=scale($scale)
    +transform(scale($scale))

// scaleX
=scaleX($scaleX)
    +transform(scaleX($scaleX))

// scaleY
=scaleY($scaleY)
    +transform(scaleY($scaleY))

// translate
=translate($x, $y)
    +transform(translate($x, $y))

// translateX
=translateX($translateX)
    +transform(translateX($translateX))

// translateY
=translateY($translateY)
    +transform(translateY($translateY))

// translate
=translate3d ($x, $y, $z)
    +transform(translate3d($x, $y, $z))

// skew
=skew ($x, $y)
    +transform(skew(#{$x}deg, #{$y}deg))

// matrix
=matrix($matrix...)
    +transform(matrix($matrix))

// transform origin
=transform-origin ($origin)
    -moz-transform-origin: $origin
    -o-transform-origin: $origin
    -ms-transform-origin: $origin
    -webkit-transform-origin: $origin
    transform-origin: $origin

// transform style
=transform-style($style)
    -webkit-transform-style: $style
    -moz-transform-style: $style
    transform-style: $style

// transition
=transition($transition...)
    -moz-transition: $transition
    -o-transition: $transition
    -webkit-transition: $transition
    transition: $transition
=transition-property($property...)
    -moz-transition-property: $property
    -o-transition-property: $property
    -webkit-transition-property: $property
    transition-property: $property
=transition-duration($duration)
    -moz-transition-duration: $duration
    -o-transition-duration: $duration
    -webkit-transition-duration: $duration
    transition-duration: $duration
=transition-timing-function($timing)
    -moz-transition-timing-function: $timing
    -o-transition-timing-function: $timing
    -webkit-transition-timing-function: $timing
    transition-timing-function: $timing
=transition-delay($delay)
    -moz-transition-delay: $delay
    -o-transition-delay: $delay
    -webkit-transition-delay: $delay
    transition-delay: $delay

// animation
=keyframe($name)
    @-webkit-keyframes #{$name}
        @content
    @-moz-keyframes #{$name}
        @content
    @-o-keyframes #{$name}
        @content
    @-ms-keyframes #{$name}
        @content
    @keyframes #{$name}
        @content
=animation($content)
    -webkit-animation: $content
    -moz-animation: $content
    -o-animation: $content
    -ms-animation: $content
    animation: $content
=animation-name($name)
    -webkit-animation-name: $name
    -moz-animation-name: $name
    -o-animation-name: $name
    animation-name: $name
=animation-duration($duration)
    -webkit-animation-duration: $duration
    -moz-animation-duration: $duration
    -o-animation-duration: $duration
    animation-duration: $duration
=animation-delay($delay)
    -webkit-animation-delay: $delay
    -moz-animation-delay: $delay
    -o-animation-delay: $delay
    animation-delay: $delay
=animation-iteration-count($count)
    -webkit-animation-iteration-count: $count
    -moz-animation-iteration-count: $count
    -o-animation-iteration-count: $count
    animation-iteration-count: $count