Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----

// Mixins.
@mixin icon {
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
  height: 20px;
  width: 20px;
}

@mixin icon-phone {
  @include icon;
  background-image: url(../images/icons/phone.svg);
}

// Apply icon to ":before" psuedo element.
.custom-title {
  padding-left: 30px;
  position: relative;
  text-align: left;

  // Icon.
  &:before {
    @include icon-phone;
    content: '';
    left: 0;
    position: absolute;
  }
}

// Apply icon to specific element.
.icon-phone {
  @include icon-phone;
}

// Apply icon to specific element and increase size of icon.
.icon-phone__large {
  @include icon-phone;
  height: 50px;
  width: 50px;
}

SassMeister-output.css

.custom-title {
  padding-left: 30px;
  position: relative;
  text-align: left;
}
.custom-title:before {
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
  height: 20px;
  width: 20px;
  background-image: url(../images/icons/phone.svg);
  content: '';
  left: 0;
  position: absolute;
}

.icon-phone {
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
  height: 20px;
  width: 20px;
  background-image: url(../images/icons/phone.svg);
}

.icon-phone__large {
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
  height: 20px;
  width: 20px;
  background-image: url(../images/icons/phone.svg);
  height: 50px;
  width: 50px;
}