僞背景作物指南針精靈

我試圖找出如何實現背景作物像這樣的指南針精靈： http://nicolasgallagher.com/css-background-image-hacks/僞背景作物指南針精靈

這是我在.sass文件：

@import "buttons/*.png" 
@include all-buttons-sprites 

.buttons-arrow 
    background-image: none 
    width: 30px 
    height: 45px 

.buttons-arrow:before 
    +buttons-sprites(arrow) 
    display: block 
    content: "" 
    width: 15px 
    height: 27px

正如你所看到的，我試着製作.buttons-arrow而沒有背景圖像，然後我添加了背景圖像。但是，它給了我這個.css文件：

.buttons-sprite, .buttons-arrow, .buttons-arrow:before .buttons-arrow { 
    background: url('../images/buttons-s5ae2b3a1e9.png') no-repeat; 
} 

.buttons-arrow { 
    background-position: 0 0; 
} 

.buttons-arrow:hover, .buttons-arrow.arrow_hover, .buttons-arrow.arrow-hover { 
    background-position: 0 -27px; 
} 

.buttons-arrow { 
    background-image: none; 
    width: 30px; 
    height: 45px; 
    margin-left: 150px; 
} 

.buttons-arrow:before { 
    display: block; 
    content: ""; 
    width: 15px; 
    height: 27px; 
} 

.buttons-arrow:before .buttons-arrow { 
    background-position: 0 0; 
} 

.buttons-arrow:before .buttons-arrow:hover, .buttons-arrow:before .buttons-arrow.arrow_hover, .buttons-arrow:before .buttons-arrow.arrow-hover { 
    background-position: 0 -27px; 
} 

.buttons-arrow:hover { 
    background-color: #ea4800; 
}

顯然，這是錯誤的，因爲它合併到這個.buttons-arrow:before .buttons-arrow

我只想要一個簡單的結果是這樣

.buttons-arrow { 
    width: 30px; 
    height: 45px; 
    margin-left: 150px; 
} 

.buttons-arrow:before { 
    background-image: url('../images/buttons-s5ae2b3a1e9.png'); 
    display: block; 
    content: ""; 
    height: 27px; 
    width: 15px;

我如何使用精靈在Compass中編碼？

來源

2012-10-05 HP.

由於這個地方已經死了，我確實會幫人從谷歌搜索這個地方。答案是：

將這個頂部：

$buttons: sprite-map("buttons/*.png")

我arrow.png和在那裏arrow_hover.png。這個想法是使用精靈地圖功能而不是所有的@import。然後確保以包括:before僞元素的背景圖像而不是原來的內容：

.buttons-arrow 
    width: 50px 
    height: 50px 
    &::before 
    content: "" 
    background: sprite($buttons, arrow) no-repeat 
    display: block 
    position: relative 
    width: 20px 
    height: 20px 
    &:hover 
    background-color: gray 
    &::before 
     content: "" 
     background: sprite($buttons, arrow_hover) no-repeat 
     position: relative 
     width: 20px 
     height: 20px

來源

2012-10-09 03:38:18

不要使用'：before'和':: before'交替使用'：before'，如果你需要支持較老的IE，':: before'則不然，但最好保持一致。 – BoltClock

我讀的地方只是爲了分離，：某些東西是用於僞類的，而:: something是用於僞元素的東西。他們都是一樣的，但只是爲了閱讀目的。 –

他們**不是**相同。 – BoltClock

基於@HP答案，我可以弄清楚如何使它發揮作用。取而代之的

@include buttons-sprites(arrow)

只使用

background: sprite($buttons-sprites, arrow);

這是非常相似的@HP提出的解決辦法，但不是調用sprite-map我使用隱式生成的變量$buttons-sprites的。

來源

2014-07-04 08:44:51 lacco

僞背景作物指南針精靈

回答

相關問題