Sass Mixins

sass-mixins.md

Linear left to right gradient compatible with iOS safari

@mixin linear-gradient-ltr($fromColor, $fromStop, $toColor, $toStop) {
  background: $toColor;
  background: -moz-linear-gradient(to right, $fromColor $fromStop, $toColor $toStop);
  background: -webkit-gradient(linear, left, right, color-stop($fromStop,$fromColor), color-stop($toStop,$toColor));
  background: -webkit-linear-gradient(left, $fromColor $fromStop, $toColor $toStop); //iOS
  background: linear-gradient(to right, $fromColor $fromStop, $toColor $toStop);  //iOS
  background: -o-linear-gradient(left, $fromColor $fromStop, $toColor $toStop);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#{$fromColor}, endColorstr=#{$toColor});
  -ms-filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#{$fromColor}, endColorstr=#{$toColor});
}

$color: orange; //orange rgb(255,165,0) or #FFA500
$colorTo: rgba($color, 1);
$colorFrom: rgba($color, 0); //orange transparent. Cannot use 'transparent' because of iOS

@include linear-gradient-ltr($colorFrom, 60%, $colorTo, 85%);