Databases
StackOverflow2013
Postsdbo
POCompass: syntax to generate sprite images, with a specific state on the parent item (:hover, .class)
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCompass: syntax to generate sprite images, with a specific state on the parent item (:hover, .class)
    text
    copied!<p>I would like to use SASS &amp; <a href="http://compass-style.org/help/tutorials/spriting/" rel="nofollow">Compass</a> to generate some specific sprites. </p> <p>This is the code I have, without Compass/Sprite: </p> <pre><code>.ico-account-contact-informations { width:60px; height:40px; background:url(/images/ico-account/contact-informations.png); a[href]:hover &amp;, .fn-active &amp; {background:url(/images/ico-account/contact-informations_active.png);} } .ico-account-credit-cards { width:60px; height:40px; background:url(/images/ico-account/credit-cards.png); a[href]:hover &amp;, .fn-active &amp; {background:url(/images/ico-account/credit-cards-active_active.png);} } </code></pre> <p>I need the same structure with a sprite image. I read the "<a href="http://compass-style.org/help/tutorials/spriting/" rel="nofollow">magical part</a>" of the sprite tutorial, but I can't find the correct syntax to do what I need.</p> <hr> <p>For exemple I tried that:</p> <pre><code>$ico-account-sprite-dimensions: true; @include all-ico-account-sprites(); a {@include all-ico-account-sprites();} </code></pre> <p>But with that, the state :hover is on the "img" but not on the "a".</p> <hr> <p>I also tried that:</p> <pre><code>$ico-account-sprite-dimensions: true; @import "ico-account/*_hover.png"; a[href]:hover {@include all-ico-account-sprites(true);} @import "ico-account/*.png"; @include all-ico-account-sprites(true); </code></pre> <p>Now it generate multiple variants of css class name, but not the case for:</p> <pre><code>a[href]:hover .ico-account-credit-cards {...} </code></pre> <p>And there is 2 sprites instead of 1.</p> <hr> <p>Not so easy for me... thanks for your help.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload