एकाधिक पृष्ठभूमि छवियां (ढाल + स्प्राइट)

Question

यह विशेष रूप से एसएएसएस के लिए कंपास ढांचे से संबंधित है।

मैंने एक स्प्राइट और एक ढाल मिश्रण भी बनाया है। क्या दोनों एक ही आइटम पर गठबंधन करना संभव है, और यदि ऐसा है तो कैसे?

@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); 
} 

अद्यतन:

मैं इस समाधान के साथ आ गया है, किसी को भी इस पर सुधार कर सकते हैं? (आपके मूल उदाहरण के आधार पर)

@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

आप $<map>-sprites चर का उपयोग कर सकते हैं स्प्राइट नक्शा स्प्राइट mixins द्वारा उत्पन्न प्राप्त करने के लिए, की तरह तो:

@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); 
} 

नहीं आवश्यक रूप से सभी कि और अधिक सुरुचिपूर्ण (यदि बिल्कुल), लेकिन अगर आप इसे लेना चुनते हैं तो एक और मार्ग। :)