Sprites

by eirc

HTML

Sprites with :before

<div>
    before
    <span class="sprite1">in</span>
    after
</div>

<div>
    before
    <span class="sprite1"></span>
    after
</div>

<div>
    <span>before</span>
    <span class="sprite1"></span>
    <span>after</span>
</div>

<hr/>

Sprites without :before

<div>
    before
    <span class="sprite2">in</span>
    after
</div>

<div>
    before
    <span class="sprite2"></span>
    after
</div>

<div>
    <span>before</span>
    <span class="sprite2"></span>
    <span>after</span>
</div>

SCSS

@mixin sprite {
    background: url(https://www.google.gr/images/nav_logo114.png) no-repeat;
    display: inline-block;
    vertical-align: middle;
    content: "";
}

.sprite1:before {
    @include sprite;
    background-position: -24px 0;
    width: 28px;
    height: 29px;
}

.sprite2 {
    @include sprite;
    background-position: -24px 0;
    width: 28px;
    height: 29px;
}