Degradados lineales en Sass

[Victor García Cuenllas]

Lo primero que hay que hacer es actualizar Compass.
Actualizar Compass:
En la consola de ruby escribir: gem update compass

El siguiente paso es sincronizar.

El archivo dependiente es "_mixins.scss", en el que debe aparecer:

@mixin degradado-lineal( $colorInicio, $colorFin ) {
@include background( linear-gradient( color-stops( $colorInicio,
$colorFin ) ) );
@include filter-gradient( $colorInicio, $colorFin );
}

¿Cómo usarlo?

Añadir:
@include degradado-lineal( $colorInicio, $colorFin );

$colorInicio: es el color superior.
$colorFin: es el color inferior.

Ejemplo:
.c-lo-que-sea {
@include degradado-lineal( #FFFFFF, #F6F7F8 );
}

¿Qué pintará?

background: url('data:image/svg
+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI
+PGRlZnM
+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI
+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Y2ZjdmOCIvPjwvbGluZWFyR3JhZGllbnQ
+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc
+IA==');
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%,
#ffffff), color-stop(100%, #f6f7f8));
background: -webkit-linear-gradient(#ffffff, #f6f7f8);
background: -moz-linear-gradient(#ffffff, #f6f7f8);
background: -o-linear-gradient(#ffffff, #f6f7f8);
background: -ms-linear-gradient(#ffffff, #f6f7f8);
background: linear-gradient(#ffffff, #f6f7f8);
*zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0,
startColorstr='#FFFFFFFF', endColorstr='#FFF6F7F8');
background: #ffffff;

Más info:

http://compass-style.org/reference/compass/css3/images/
http://compass-style.org/reference/compass/css3/images/#mixin-background
http://compass-style.org/reference/compass/css3/images/#mixin-filter-gradient