css - 以一致的方式制作 compass 顺序 Sprite

如何以一致的方式制作Compass顺序精灵，以便可以为悬浮状态创建单独的图纸？

我正在使用Compass的Sprite Sheet工具，如下所示：

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

这样可以制作出漂亮的Sprite工作表，例如：{

.ui-icon-add {
  background-position: 0 -5344px; }

.ui-icon-alert {
  background-position: 0 -2352px; }

...etc...

但是，如果我将源精灵切换为悬停颜色，它将重新生成生成的图纸：

.ui-icon-add {
  background-position: 0 -5376px; }

.ui-icon-alert {
  background-position: 0 -2320px; }

...etc...

我正在使用这样的悬停状态（基于jQuery UI）：

.ui-icon {
    width: 16px;
    height: 16px;
    display: block;
    background-image: url('ui-icons.png');
}

.ui-state-hover .ui-icon {
    background-image: url('ui-icons-hover.png');
}

但是由于Compass不一致，因此将鼠标悬停时图标会有所不同。

（我知道Compass支持_hover后缀，但我宁愿它像jQuery UI一样生成它们。）

最佳答案

尝试设置魔术变量：

$ui-icon-sprite-layout: horizontal;

对于您的两个图标精灵。以我的经验，水平是唯一一次每次以相同的顺序生成带有相同图标的两个精灵的布局模式。

另请参见GitHub上的指南针问题：https://github.com/chriseppstein/compass/issues/690

关于css - 以一致的方式制作 compass 顺序 Sprite ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14679196/