多个背景图像(渐变+精灵)

Question

这特别涉及SASS的罗盘框架.

我创建了一个精灵,也是一个渐变混合.是否有可能将两者合并在同一个项目上,如果是这样,怎么办？

@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变量来获取sprite 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);
}

不一定更优雅(如果有的话),但如果你选择采取它,另一条路线.:)