Clever Sass Mixins

mixins.sass

// @include rounded(25px)
@mixin rounded($radius)
  -webkit-border-radius: $radius
  -moz-border-radius: $radius
  border-radius: $radius

@mixin rounded-tl($radius)
  -moz-border-radius-topleft: $radius
  -webkit-border-top-left-radius: $radius
  border-top-left-radius: $radius

@mixin rounded-tr($radius)
  -moz-border-radius-topright: $radius
  -webkit-border-top-right-radius: $radius
  border-top-right-radius: $radius

@mixin rounded-bl($radius)
  -moz-border-radius-bottomleft: $radius
  -webkit-border-bottom-left-radius: $radius
  border-bottom-left-radius: $radius

@mixin rounded-br($radius)
  -moz-border-radius-bottomright: $radius
  -webkit-border-bottom-right-radius: $radius
  border-bottom-right-radius: $radius

// @include boxshadow(0 1px 2px rgba(0, 0, 0, 0.5))
@mixin boxshadow($params)
  -webkit-box-shadow: $params
  -moz-box-shadow: $params
  box-shadow: $params

// @include clearfix
@mixin clearfix
  *display: inline-block
  &:after
    content: " "
    display: block
    height: 0
    clear: both
    visibility: hidden

// @include linear-gradient($banana, darken($banana, 30%))
@mixin linear-gradient($from, $to)
  background-image: -moz-linear-gradient(top, $from, $to)
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, $from), color-stop(1, $to))

@mixin inset-text
  text-shadow: 1px 1px 0 #f2f2f2