多重背景图片（渐变+精灵图）

Question

这个问题与SASS中的指南针框架有关。

我创建了一个精灵和一个渐变mixin。是否可能将两者合并到同一项中？如果可以，如何实现？

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

- user623520

---

谢谢！我发现只有在我将图标传递给background()，然后是渐变（与你的相反），像这样：@include background($icon-search, $light-gradient);时才能正常工作。 - James

Answer 1

您可以使用$<map>-sprites变量来获取由精灵混合生成的精灵地图，例如（基于您的原始示例）：

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

不一定更加优雅（如果有的话），但如果你选择这条路线，这是另一种方法。 :)

- Lance Roggendorff