Hashrocket Mixins file

mixins.sass

// prefix support

$prefixes: webkit, moz, ms, o, khtml
= border-box
  box-sizing: border-box
  @each $prefix in $prefixes
    -#{$prefix}-box-sizing: border-box
= border-top-radius($radius)
  border-top-left-radius: $radius
  border-top-right-radius: $radius
= border-bottom-radius($radius)
  border-bottom-left-radius: $radius
  border-bottom-right-radius: $radius
= border-left-radius($radius)
  border-top-left-radius: $radius
  border-bottom-left-radius: $radius
= border-right-radius($radius)
  border-top-right-radius: $radius
  border-bottom-right-radius: $radius
= box-shadow($arguments)
  -webkit-box-shadow: $arguments
  box-shadow: $arguments
= opacity($val)
  opacity: $val
  filter: alpha(opacity=$val*100)
= display_box($orient: horizontal)
  @each $prefix in $prefixes
    display: -#{$prefix}-box
    -#{$prefix}-box-orient: $orient
    -#{$prefix}-box-align: center
    -#{$prefix}-box-pack: center
  display: box
  box-orient: $orient
  box-align: center
  box-pack: center
= box_flex($index: 1)
  @each $prefix in $prefixes
    -#{$prefix}-box-flex: $index
  box-flex: $index
= transition-property($val)
  -webkit-transition-property: $val
  -moz-transition-property: $val
= transition-duration($val)
  -webkit-transition-duration: $val
  -moz-transition-duration: $val

// shorthand for common patterns

= underline_hover
  text-decoration: none
  &:hover
    text-decoration: underline
= gradient-bg($color1, $color2)
  background-color: $color1
  background-image: -moz-linear-gradient(100% 100% 90deg, $color2, $color1)
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($color1), to($color2))
= image-replace($img)
  display: block
  font-size: 1px
  text-indent: -9327px
  overflow: hidden
  background-image: url("/assets/#{$img}")
  background-repeat: no-repeat
= font-smoothing
  -webkit-font-smoothing: antialiased