Çoklu arka plan resimleri (degrade + hareketli)

Question

Bu özellikle SASS için pusula çerçevesine ilişkindir.

Bir hareketli grafik ve ayrıca bir degrade karışımı oluşturdum. İkisini aynı öğede birleştirmek mümkün mü ve eğer öyleyse nasıl?

@import "compass/css3"; 

@import "icon/*.png"; 
@include all-icon-sprites; 

@mixin light-gradient { 
    @include background-image(linear-gradient(top, $dark 20%, $light 100%)); 
    color: $dark; 
    text-shadow: $light; 
} 

button { 
    @include light-gradient; 
    @include icon-sprite(search); 
} 

Güncelleme:

Kimsenin üzerinde artırabilir, bu çözüm ile geldim?

@import "compass/css3"; 
@import "compass/utilities/sprites"; 

$icon: sprite-map("icon/*.png"); 

$light-gradient: linear-gradient(bottom, $shade-2 20%, $shade-3 100%); 
$icon-search: sprite($icon, search) no-repeat; 

button { 
    @include background($light-gradient, $icon-search); 
} 

Answer 1

Sen gibi pek sprite Mixins tarafından oluşturulan sprite harita almak için $<map>-sprites değişkeni kullanabilirsiniz (orijinal örneğin göre):

@import "compass/css3"; 

@import "icon/*.png"; 
@include all-icon-sprites; 

button { 
    @include background(linear-gradient(top, $dark 20%, $light 100%), 
         sprite($icon-sprites, search) no-repeat); 
} 

Mutlaka tüm bu çok daha şık (eğer Eğer almayı seçerseniz, ancak başka bir yol. :)