2

如何以一致的方式制作 Compass 顺序精灵，以便为悬停状态提供单独的工作表？

我正在使用 Compass 的精灵表工具，如下所示：

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

这使得一个很好的精灵表像：{

.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 支持_hover后缀，但我更希望它像 jQuery UI 那样生成它们。）

4

2 回答 2

1

尝试设置魔法变量：

$ui-icon-sprite-layout: horizontal;

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

另请参阅 GitHub 上的 Compass 问题：https ://github.com/chriseppstein/compass/issues/690

于 2013-02-27T18:57:59.713 回答
0

您可以使用@each循环以您想要的方式创建映射。缺点是它要求您遵循 and 的命名约定sprite，hover-sprite以及手动编辑$icons变量。

目录结构

├── ui-icon
│   ├── add.png
│   ├── alert.png
│   ├── hover-add.png
│   └── hover-alert.png
└── ui-icon-s38eb55a811.png

SCSS

import "compass/utilities/sprites";

@import "ui-icon/*.png";
$icons:   add alert;

  @each $icon in $icons {
    .ui-icon-#{$icon} {
      @include ui-icon-sprite($icon);
    }
    .ui-icon-hover-#{$icon}{
      @include ui-icon-sprite("hover-" + $icon)
    }
}

CSS

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

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

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

.ui-icon-hover-alert {
  background-position: 0 -96px;
}
于 2013-02-27T19:10:11.050 回答