以一致的方式制作指南针订单精灵

Question

如何以一致的方式制作指南针订单精灵，因此我可以为悬停状态设置单独的工作表？

我使用罗盘的精灵表的工具是这样的：

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

这使一个很好的精灵表所示：{

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

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

...etc... 

但是，如果我转了我的源精灵的悬停颜色，它reoreders生成的工作表：

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

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

...etc... 

我使用悬停状态这样（基于f 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; 
}