[sass minxin] linear-gradient with bg-color fallback

linear-gradient with fallback

/* Functions */

/*
 * $c1 == $c2
 */
@function isSameColor($c1, $c2)
  @return red($c1) == red($c2) and green($c1) == green($c2) and blue($c1) == blue($c2)

/*
 * Get Middle Color
 * if $c1 == $c2
 *   transparent
 * else
 *   middle color
 */
@function getMiddleColor($c1, $c2, $fallback)
  @if $fallback != ""
    @return $fallback
  @else if isSameColor($c1, $c2)
    @return transparent
  @else
    @return rgb((red($c1) + red($c2)) / 2, (green($c1) + green($c2)) / 2, (blue($c1) + blue($c2)) / 2)

/*
 * MINXIN
 */

=linear-gradient($angle, $c1, $c2, $fallback: "")
  background-color: getMiddleColor($c1, $c2, $fallback)
  @if $angle == to bottom
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $c1), color-stop(100%, $c2))
    background-image: -webkit-linear-gradient(top, $c1, $c2)
  @else if $angle == to right
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, $c1), color-stop(100%, $c2))
    background-image: -webkit-linear-gradient(left, $c1, $c2)
  background-image: linear-gradient($angle, $c1, $c2)