用SASS /指南针定位精灵

我遇到了使用Compass精灵水平对中精灵的问题。用SASS /指南针定位精灵

我有一堆图标大小不同的小精灵，我希望它们以它们所在的容器为中心，例如它们是左手边的图标。

如果我这样做：

$sprite-position: 50%; 
@import "sprite/*.png";

图像并集中在产生sprite.png但实际上CSS是一样的东西：

background-position: -9px -223px;

而不是预期的：

background-position: 50% -223px;

如果它的位置具体为d这样的呃？现在我把它硬编码为50％，而Y轴很糟糕，因为当我添加一个新的精灵时，我必须改变它们，这完全无法达到目的。

我在Compass，CSS中做了这个错误还是只是不按它应该的那样工作？我可以看到完成的唯一方法是让它指定尺寸，然后包含图标并将其居中。剩下的50％的价值在那里，所以你不需要这样做......对吧？

只是一个说明......它很糟糕，Compass也不支持JPEG精灵.- - 在头版页上有6个促销图片，它会很好，让他们成功地在那里你可以取代该文件夹中的图像及其排序！

感谢，大教堂

来源

2011-12-18 Dominic Watson

Dom，你能澄清一下实际问题是什么吗？从你在这里说的话来看，这听起来似乎看起来很正确，但你对编写CSS的方式并不满意。最终结果是否存在实际问题，或者您是否想要在图像更改后不需要重新编译的东西？ – 2011-12-19 15:34:14

问题是我有一个60像素宽的div，我希望宽度为60像素（例如15,20,30,40,55像素）的图像可以在该Div中居中。所以通常你会创建一个精灵，在CSS中你会写：background-position：50％-223px来得到它。但Compass写出确切的左侧位置，这意味着它不居中，它仍然左对齐。它应该把它放在精灵的中间，它并没有什么不同。 CSS也需要改变。为了解决这个问题，我需要一个额外的div容器，并将子精灵居中。 – 2011-12-19 19:17:20

只是沾上你的问题。我明白你的观点并有同样的问题。我也试图找到一个通用的解决方案。但它似乎不可能atm。

对我来说position offset option的作品，但它不是，你必须将它应用到每个精灵完美的原因：

@import "socialmedia/*.png"; 

a.twitter { 
    @include socialmedia-sprite("twitter"); 
    @include socialmedia-sprite-position("twitter", 50%); 
} 

a.facebook { 
    @include socialmedia-sprite("facebook"); 
    @include socialmedia-sprite-position("facebook", 50%); 
}

这是覆盖水平值，但保持垂直值。

正如我所说，不完美，但工程，如果你不需要调整大量的恶意。你可以写一个mixin。但是，如果Compass本身能够提供这样的选择，那么仍然会很棒。

来源

2013-01-26 08:41:35 escapedcat

谢谢，不知道精灵位置 – 2013-01-26 12:58:51

另外，我不相信精灵sprite是一个可用的mixin，除非它是你自己定制的一个？ – 2013-02-19 17:00:57

嘿大教堂。对不起，我的例子错了。我更新它并使其更容易理解。没有涉及任何个人“混入”。但这将是下一步将“每个”和“mixin”结合起来。 – escapedcat 2013-02-21 07:34:42

只是为了检查，如果我得到你的权利：你创建了所有要居中的图标一个精灵。在精灵的所有图标都居中，所以你可以使用x：50％和相应的y值，对吧？

由于指南针集的错误背景位置，您可以使用其他方法。至少，那是我做的。如果你不需要支持IE6/7，你可以使用圆规inline-data-feature：http://compass-style.org/reference/compass/helpers/inline-data/

这样你可以减少作为精灵的主要目的的HTTP请求，但同时你得到所有的正常形象给你带来的好处。

如果你打造一个聪明的混合，这是非常非常方便。甚至比精灵更聪明。

来源

2012-01-26 18:10:05 awenro

我有同样的问题。我想垂直居中水平精灵（例如，使用inline元素创建图标）。不幸的是北斗转换我的50％至50像素，所以我创建了这些功能：

@function _sprite-position-nth($map, $sprite, $n) { 
    $positions: sprite-position($map, $sprite); 
    @return nth($positions, $n); 
} 

@function sprite-position-x($map, $sprite) { 
    @return _sprite-position-nth($map, $sprite, 1); 
} 

@function sprite-position-y($map, $sprite) { 
    @return _sprite-position-nth($map, $sprite, 2); 
}

用法示例：

$icons: sprite-map("icons/*.png", $layout: horizontal); 

a.arrow:after { 
    background: $icons sprite-position-x($icons, arrow-right) 50%; 
    //... 
}

我希望我能帮上忙。

来源

2013-12-19 13:50:57 zsotyooo

用SASS /指南针定位精灵

回答

相关问题