Skip to content

Instantly share code, notes, and snippets.

@jonathan-beebe

jonathan-beebe/SassMeister-input-HTML.html

Created April 23, 2014 16:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jonathan-beebe/11221389 to your computer and use it in GitHub Desktop.
Save jonathan-beebe/11221389 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<div class="spriteWrapper sc max_lucado">
<img src="http://a248.e.akamai.net/f/1611/26335/9h/dramsey.download.akamai.com/23572/daveramsey.com/media/fpu/stewardship/conference_2014/sc_headshot_sprite_116.png" alt=""/>
</div>
<div class="spriteWrapper sc dave_ramsey">
<img src="http://a248.e.akamai.net/f/1611/26335/9h/dramsey.download.akamai.com/23572/daveramsey.com/media/fpu/stewardship/conference_2014/sc_headshot_sprite_116.png" alt=""/>
</div>
<div class="spriteWrapper sc tom_stanley">
<img src="http://a248.e.akamai.net/f/1611/26335/9h/dramsey.download.akamai.com/23572/daveramsey.com/media/fpu/stewardship/conference_2014/sc_headshot_sprite_116.png" alt=""/>
</div>
<p>test</p>
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.5)
// Compass (v)
// ----
// http://sassmeister.com/gist/11221389
@import "compass";
$speakerSprite_sc: "http://a248.e.akamai.net/f/1611/26335/9h/dramsey.download.akamai.com/23572/daveramsey.com/media/fpu/stewardship/conference_2014/sc_headshot_sprite_116.png";
.spriteWrapper {
width: 116px;
height: 116px;
position: relative;
@include inline-block;
img { position: absolute; top: 0; left: 0; }
&.sc {
&.max_lucado img { clip: rect(0 116px 116px 0); }
&.dave_ramsey img { clip: rect(121px 116px 237px 0); top: -121px; }
&.tom_stanley img { clip: rect(242px 116px 358px 0); top: -242px; }
}
}
Raw
SassMeister-output.css
.spriteWrapper {
width: 116px;
height: 116px;
position: relative;
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
*zoom: 1;
*display: inline;
}
.spriteWrapper img {
position: absolute;
top: 0;
left: 0;
}
.spriteWrapper.sc.max_lucado img {
clip: rect(0 116px 116px 0);
}
.spriteWrapper.sc.dave_ramsey img {
clip: rect(121px 116px 237px 0);
top: -121px;
}
.spriteWrapper.sc.tom_stanley img {
clip: rect(242px 116px 358px 0);
top: -242px;
}
Raw
SassMeister-rendered.html
<div class="spriteWrapper sc max_lucado">
<img src="http://a248.e.akamai.net/f/1611/26335/9h/dramsey.download.akamai.com/23572/daveramsey.com/media/fpu/stewardship/conference_2014/sc_headshot_sprite_116.png" alt=""/>
</div>
<div class="spriteWrapper sc dave_ramsey">
<img src="http://a248.e.akamai.net/f/1611/26335/9h/dramsey.download.akamai.com/23572/daveramsey.com/media/fpu/stewardship/conference_2014/sc_headshot_sprite_116.png" alt=""/>
</div>
<div class="spriteWrapper sc tom_stanley">
<img src="http://a248.e.akamai.net/f/1611/26335/9h/dramsey.download.akamai.com/23572/daveramsey.com/media/fpu/stewardship/conference_2014/sc_headshot_sprite_116.png" alt=""/>
</div>
<p>test</p>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment