html - 指南针 Sprite 进阶

Question

我有一个关于使用罗盘模式在“高级” Sprite 中创建的小问题。当我说“高级模式”将 Sprite 存储在变量中时，我更喜欢这种方法:)

无论如何，我的问题是我无法将图像自定义为一半。让我解释一下:

托管空间，图标位置和布局，没问题。但是，它针对的是我遇到问题的单个图标。根据文档 Compass，只需执行以下操作:

$sprite: sprite-map("sprite/*.png",
        $layout: vertical,
        $spacing: 50px,
        $position: 50%,
        $facebook-position: 100%); // position icon facebook, don't work

但是不管用 $facebook-position 还是 $facebook-spacing 都不起作用，那个图标不会移动 :(

用户 Compass 高级拖累在这里吗？ :D

谢谢你:)

Answer 1

在某些时候我遇到了类似的问题，如果我没记错的话，如果我使用 map (文件夹)名称作为前缀(在你的示例中 $sprite-facebook-position 而不是只是 $facebook-position).

根据example，这显然不是应该的样子当前 Compass documentation (还有 here )- 但也许是在一些旧版本的 Compass 中，我不记得了 - 所以希望它能解决您的问题。

另请注意，您的设置可能不会影响 Sprite 图上的第一个(相应的) Sprite 。因此，如果您调整第一个 Sprite 的 spacing，它只会改变所有后续 Sprite 的位置。例如，在垂直 Sprite 布局上，如果所有 Sprite 的宽度相同，则以百分比设置的 position 不会发生任何变化。这两个是设置可能有效但您看不到效果的示例。