CSS Compass自定义精灵名称[重复]

Question

现在如果我们使用指南针生成精灵图像

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

我们像这样在我们的 .css 类中作弊

.imgs-<imagename>

是否可以删除“imgs”部分？我只需要.<imagename>

Answer 1

在这种情况下，不要使用神奇的all。它不是那么方便，但工作正常。只需 @import 精灵和 @include 自定义类中的单个图像：

@import "imgs/*.png";

.circle {
    @include imgs-sprite('circle');
}

.square {
    @include imgs-sprite('square');
}

干起来让你的生活更简单：

@each $file in circle, square {
    .#{$file} {
        @include imgs-sprite($file);
    }
}