Добавляем градиент в sass через миксины или с помощью bourbon

Для того, чтобы не прописывать градиенты с вендорными префиксами для каждого элемента, достаточно использовать миксины или подключить Бурбон, у которого есть свой набор готовых миксинов.

Вариант #1. Создаем такой миксин:

@mixin linear-gradient($direction, $fromColor, $toColor)
  background-color: $toColor /* Fallback Color */
  background-image: -webkit-gradient(linear, $direction, from($fromColor), to($toColor)) /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient($direction, $fromColor, $toColor) /* Chrome 10+, Saf5.1+, iOS 5+ */
  background-image:    -moz-linear-gradient($direction, $fromColor, $toColor) /* FF3.6 */
  background-image:     -ms-linear-gradient($direction, $fromColor, $toColor) /* IE10 */
  background-image:      -o-linear-gradient($direction, $fromColor, $toColor) /* Opera 11.10+ */
  background-image:         linear-gradient($direction, $fromColor, $toColor)
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#{$fromColor}', EndColorStr='#{$toColor}');

А затем выводим его таким образом для любого элемента

header
  @include linear-gradient(left, $purple, $blue)

Где $purple и $blue — это переменные, заданные выше по коду

$purple: #8e70af
$blue: #48bfed

На выходе получим такой css:

.header {
  background-color: #48bfed;
  background-image: -webkit-gradient(linear, left, from(#8e70af), to(#48bfed));
  background-image: -webkit-linear-gradient(left, #8e70af, #48bfed);
  background-image: -moz-linear-gradient(left, #8e70af, #48bfed);
  background-image: -ms-linear-gradient(left, #8e70af, #48bfed);
  background-image: -o-linear-gradient(left, #8e70af, #48bfed);
  background-image: linear-gradient(left, #8e70af, #48bfed);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#8e70af', EndColorStr='#48bfed');
}

Вариант #2. Если же у вас подключен bourbon, то миксин создавать не нужно, достаточно задать градиент таким образом:

header
  @include linear-gradient(left, $purple, $blue)

Этой строкой @import "bourbon/bourbon" Bourbon импортируется один раз в самом верху кода.

И на выходе получим такой css:

header {
  background-color: #8e70af;
  background-image: -webkit-linear-gradient(left, #8e70af, #48bfed);
  background-image: linear-gradient(to right,#8e70af, #48bfed);
}