跨多個樣式表的指南針精靈圖像

有沒有辦法讓指南針從不同樣式表中的圖像中生成精靈表單？跨多個樣式表的指南針精靈圖像

該tutorial談論從文件夾中的一堆圖像生成精靈，然後在1樣式表中使用它。但對我來說，這似乎直覺上必須使用在我所有的樣式表以下使用精靈表：

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

我寧願爲每個精靈表設置不同的圖像，然後一些如何將它們標記爲精靈生成，以便指南針可以將它們收集到一個精靈，然後更新CSS來反映。

來源

2012-02-14 F21

指南針只爲每個目錄生成一個精靈。這很好，因爲它可以被瀏覽器緩存，如果您在多個頁面上使用它，則無需獲取它。您可以反覆使用該精靈，甚至有選擇地使用您參考的教程中介紹的選擇器控件。

試想一下，在你的圖像文件夾有四個圖標：

圖像/圖標/ apple.png
圖像/圖標/ banana.png
圖像/圖標/ basketball.png
圖像/圖標/ football.png

在一個名爲fruits.sass樣式表，你導入所有的圖標和只使用apple和banana圖標。

@import "icon/*.png"; 

.fruits 
    .banana 
    +icon-sprite(banana) 
    .apple 
    +icon-sprite(apple)

在一個名爲sports.sass樣式表，導入所有的圖標，並且只使用basketball和football圖標。

@import "icon/*.png"; 

.sports 
    .football 
    +icon-sprite(football) 
    .basketball 
    +icon-sprite(basketball)

當你編譯，例如命名爲一個精靈一樣icon-sjargon1.png將在images產生。

圖像/圖標/ apple.png
圖像/圖標/ banana.png
圖像/圖標/ basketball.png
圖像/圖標/ football.png
圖像/ icon- sjargon1.png

你產生fruits.css看起來類似：

.icon-sprite, 
.fruits .banana, 
.fruits .apple { background: url('/images/icon-sjargon1.png') no-repeat; } 

.fruits .banana { background-position: 0 -20px; } 
.fruits .apple { background-position: 0 0; }

你產生sports.css會是這樣的：在不同的文件夾

.icon-sprite, 
.sports .football, 
.sports .basketball { background: url('/images/icon-sjargon1.png') no-repeat; } 

.sports .football { background-position: 0 -60px; } 
.sports .basketball { background-position: 0 -40px; }

來源

2012-02-15 19:14:30 maxbeatty

完美而且寫得很好！ :) – F21 2012-02-15 22:25:50

嗯。「@import」圖標/ *。png「'拋出語法錯誤：」... $ main-clean-up，「：預期的函數參數，後面是」;「;」從第3行的主的第18行。我也在使用SCSS。 – F21 2012-02-16 00:12:03

升級到最新的compass.app，一切都很好:) – F21 2012-02-16 01:24:17

您也可以單獨精靈把圖像。例如：

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

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

當你的網站有很多章節和一個也許特定部分必須有一個不同的主題，這是非常有用的。

最後一件事...

我不是@include all-themeOne-sprites;將所有的子畫面圖像的粉絲，我更喜歡這樣做：

@import "themeOne/*.png"; 

.somebox .icon { 
    @include themeOne-sprite(anyIcon); 
}

如果你想在.somebox .icon是尺寸爲anyIcon圖像，可以將圖標名稱後加上真實參數，像這樣：

.somebox .icon { 
    @include themeOne-sprite(anyIcon, true); 
}

我希望它能幫助！

來源

2013-04-14 06:26:19 verlok

跨多個樣式表的指南針精靈圖像

回答

相關問題