user623520
user623520

Reputation:

Multiple background images (gradient + sprite)

This relates specifically to the compass framework for SASS.

I have created a sprite and also a gradient mixin. Is it possible to combine the two on the same item, and if so how?

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

Update:

I've come up with this solution, can anybody improve on it?

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

Upvotes: 10

Views: 4454

Answers (1)

Lance Roggendorff
Lance Roggendorff

Reputation: 61

You can use the $<map>-sprites variable to get the sprite map generated by the sprite mixins, like so (based on your original example):

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

Not necessarily all that much more elegant (if at all), but another route if you choose to take it. :)

Upvotes: 6

Related Questions