• background-image の linear-gradient を返す。
• 未対応ブラウザのフォールバックとして background-color も返す。
• フォールバックの background-color は開始色が使用される。
• フォールバックの background-color を指定したい場合は、最終引数に $fallback: で指定する。
• 注意点（β版故の）
  • ～ iOS 4.2 & ～ Android 3.0 に対応させたい場合は -webkit-gradient() を別途併記する。
  • 指定可能な色数は最大 10 個（もしそれ以上必要なら改修するが、これ以上多くなることは無いと想定）。

@mixin pe-linear-gradient() {
  ...
}

.class-name {
  @include pe-linear-gradient(to bottom, #ffffff, #faf8f5);
}

.class-name {
  background-color: #ffffff;
  background-image: -webkit-linear-gradient(top, #ffffff, #faf8f5);
  background-image: linear-gradient(to bottom, #ffffff, #faf8f5);
}

その他の使用例。

.class-name {
  // 色の位置を指定
  @include pe-linear-gradient(to bottom, #ffffff 90%, #faf8f5 100%);

  // フォールバック色を指定
  @include pe-linear-gradient(to bottom, #ffffff 90%, #faf8f5 100%, $fallback: #faf8f5);

  // 角度を指定
  @include pe-linear-gradient(160deg, #999ca8 0, #999ca8 60%, #6b6f7d 62%, #6b6f7d 100%);
}

.class-name {
  background-color: #ffffff;
  background-image: -webkit-linear-gradient(top, #ffffff 90%, #faf8f5 100%);
  background-image: linear-gradient(to bottom, #ffffff 90%, #faf8f5 100%);

  background-color: #faf8f5;
  background-image: -webkit-linear-gradient(top, #ffffff 90%, #faf8f5 100%);
  background-image: linear-gradient(to bottom, #ffffff 90%, #faf8f5 100%);

  background-color: #999ca8;
  background-image: -webkit-linear-gradient(-430deg, #999ca8 0, #999ca8 60%, #6b6f7d 62%, #6b6f7d 100%);
  background-image: linear-gradient(160deg, #999ca8 0, #999ca8 60%, #6b6f7d 62%, #6b6f7d 100%);
}