Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="container">
  <p>Hello world</p>
</div>

SassMeister-input.scss

// ----
// libsass (v3.1.0-beta)
// ----

@mixin icon-youtube {
  width: 2rem;
  height: 2rem;
  background-position: 0 -109.6875rem;
  color: #f00;
  border: 1px solid #f00;
  @include background();
}

@mixin icon-wheel {
  width: 0.875rem;
  height: 0.875rem;
  color: #0f0;
  border: 1px solid #0f0;
  background-position: -2.5rem -108.4375rem;
  @include background();
}

@mixin background() {
  background-size: 118.4375rem 112.1875rem;
  background-repeat: no-repeat;
  background-image: url(sprite.png);

  .svg & {
    background-image: url(sprite.svg);
  }
}

.container {
  background: #ff0;
  
  &:before {
    @include icon-youtube();
    content: "O";
    display: inline-block;
    overflow: none;
    transition: all 0.2s ease-in-out;
    
    @media (min-width: 1000px) {
      @include icon-wheel();
    }
  }
}

SassMeister-output.css

.container {
  background: #ff0; }
  .container:before {
    width: 2rem;
    height: 2rem;
    background-position: 0 -109.6875rem;
    color: #f00;
    border: 1px solid #f00;
    background-size: 118.4375rem 112.1875rem;
    background-repeat: no-repeat;
    background-image: url(sprite.png);
    content: "O";
    display: inline-block;
    overflow: none;
    transition: all 0.2s ease-in-out; }
    .svg .container:before {
      background-image: url(sprite.svg); }
    @media (min-width: 1000px) {
      .container:before {
        width: 0.875rem;
        height: 0.875rem;
        color: #0f0;
        border: 1px solid #0f0;
        background-position: -2.5rem -108.4375rem;
        background-size: 118.4375rem 112.1875rem;
        background-repeat: no-repeat;
        background-image: url(sprite.png); }
        .svg .container:before {
          background-image: url(sprite.svg); } }

SassMeister-rendered.html

<div class="container">
  <p>Hello world</p>
</div>