Question

如何以一致的方式制作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一样生成它们。）

Answer 1

尝试设置魔术变量：

$ui-icon-sprite-layout: horizontal;

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

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

Answer 2

您可以使用@each循环以您希望的方式创建映射。缺点是它要求您遵循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;
}

以一致的方式制作Compass命令精灵

2 个答案: