Несколько фоновых изображений (градиент + спрайт) - PullRequest
Новая
       5

Несколько фоновых изображений (градиент + спрайт)

10 голосов
/ 06 июня 2011

Это относится конкретно к компасной структуре для 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);
}

1 Ответ

6 голосов
/ 03 сентября 2011

Вы можете использовать переменную $<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);
}

Не обязательно все намного элегантнее (еслина все), но другой маршрут, если вы решите принять его.:)

...