Reputation:
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
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