SASS Mixins

_mixins.sass

// Rounds all the corners of a box
@mixin border-radius($radius, $clip: padding-box)
  -webkit-border-radius:  $radius
  -moz-border-radius:     $radius
  -o-border-radius:       $radius
  border-radius:          $radius
  -webkit-background-clip:  $clip
  -mox-background-clip:     $clip
  -o-background-clip:       $clip
  background-clip:          $clip

// Rounds a box's corners on one side
@mixin border-radius-side($radius, $side, $clip: padding-box)
  @if $side == 'top' or $side == 'bottom'
    -webkit-border-#{$side}-left-radius:    $radius
    -webkit-border-#{$side}-right-radius:   $radius
  @else
    -webkit-border-top-#{$side}-radius:     $radius
    -webkit-border-bottom-#{$side}-radius:  $radius

  -webkit-background-clip:  $clip
  -mox-background-clip:     $clip
  -o-background-clip:       $clip
  background-clip:          $clip

// Creates a linear gradient between two colors
@mixin linear-gradient($from, $to)
  background-color: $to
  background-image: -moz-linear-gradient($from, $to)
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, $from),color-stop(1, $to))
  background-image: -webkit-linear-gradient($from, $to)
  background-image: -o-linear-gradient($from, $to)
  background-image:  linear-gradient($from, $to)

// Adds shadow to a box
@mixin box-shadow($arguments)
  -moz-box-shadow:    $arguments
  -o-box-shadow:      $arguments
  -webkit-box-shadow: $arguments
  box-shadow:         $arguments

// Adds shadow to text
@mixin text-shadow($arguments)
  -moz-text-shadow:    $arguments
  -o-text-shadow:      $arguments
  -webkit-text-shadow: $arguments
  text-shadow:         $arguments

// Add transitions
@mixin transition($args)
  -webkit-transition:   $args
  -moz-transition:      $args
  transition:           $args

// Rotate the object the given number of degrees
@mixin rotate($angle)
  -webkit-transform: rotate($angle)
  -moz-transform: rotate($angle)
  -o-transform: rotate($angle)
  transform: rotate($angle)

// Creates the illusion of "lifted" corners
@mixin bendy-shadow($width, $angle: 5deg, $color: rgba(#333, 0.5))
  position: relative
  z-index: 1
  @include box-shadow(0 7px 5px -5px $color)
  
  &:before, &:after
    content: ""
    position: absolute
    bottom: 6px
    width: $width / 2
    height: 10px
    z-index: -1
    @include box-shadow(0 10px 10px 1px $color)
    
  &:before
    left: 0px
    @include rotate(-$angle)

  &:after
    right: 0px
    @include rotate($angle)