css – 多个背景图片(渐变精灵)

前端之家收集整理的这篇文章主要介绍了css – 多个背景图片(渐变精灵)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这具体涉及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);
}

解决方法

您可以使用$< map> -sprites变量来获取sprite mixins生成的精灵图,如此(基于您的原始示例):
@import "compass/css3";

@import "icon/*.png";
@include all-icon-sprites;

button {
    @include background(linear-gradient(top,$light 100%),sprite($icon-sprites,search) no-repeat);
}

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

猜你在找的CSS相关文章