linear-gradientの記述を極限まで減らす

Compassで@include linear-gradientすると

background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dd8099), color-stop(100%, #d86c89));
background-image: -webkit-linear-gradient(#dd8099 0%, #d86c89 100%);
background-image: -moz-linear-gradient(#dd8099 0%, #d86c89 100%);
background-image: -o-linear-gradient(#dd8099 0%, #d86c89 100%);
background-image: linear-gradient(#dd8099 0%, #d86c89 100%);

みたくベンダーだらけな挙句に古い記述まで混ざっててうんざりする。

これをもっと減らせないかなーと思ってブラウザの対応状況を調べてみたところ、PC版のSafariとAndroid Browser以外はベンダーなしに対応してた。AndroidはAndroid Browserしか調べてないけど。

ということは、

background-image: -webkit-linear-gradient(top, #f00, #fff);
background-image: linear-gradient(to bottom, #f00, #fff);

だけでいけちゃうっぽい。

これをSCSSのmixinにしたいんだけど、プレフィックス有りと無しで角度の基準位置と進行方向が違うみたいで（有りは水平から90度の位置から時計回り、無しは0度の位置から反時計回り）、プレフィックス無しの角度をθ（単位はdeg）だとしたらプレフィックス有りの角度は

θ * (-1) + 90deg

となる。

以上を踏まえてこんな感じになった。str-index使ってるのでSass 3.3から対応。

gist6623270

$startの形式は 135deg, to bottom right, top left (非推奨) のいずれか。 deg以外の単位はめんどくさくて対応してない。

Safariの開発版がどうなってるか気になるけど、対応してても正式リリース後の数ヶ月は待ったほうがいいかなと思う。もし対応してたら来年の春には一行で記述できるようになる幸せな未来が待ってると思う。