用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 /指南針定位精靈

回答

相關問題