Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="icon-hola"></div>

SassMeister-input.scss

// ----
// Sass (v3.2.19)
// Compass (v0.12.7)
// ----

$default-icon-size: 16;

@function is-size-for-icon-valid($parent-width, $parent-height) {
 
  @if $parent-width >= $default-icon-size and $parent-height >= $default-icon-size {
    @return true;
  } @else {
    @return false;
  }
}

// Mixin to embed icon as a placeholder
// @icon: the name of the icon
// @parent-width: [100%, 100px] set the width of the parent instead of the icon (16x16)
// @parent-height: [24%, 24px] set the height of the parent instead of the icon (16x16)
@mixin icon-sprite($icon, 
  $parent-width: false, 
  $parent-height: false) {
    
  @extend .icon-#{$icon} !optional;

  @if $parent-width != false or $parent-height != false {

    @if is-size-for-icon-valid($parent-width, $parent-height) {
      width: $parent-width !important;
      height: $parent-height !important; 
    } @else {
      @warning "One of the size you set is less than #{$default-icon-size}";
      border: 1px solid red;
    }   
  }
}

.icon-generic {
  width: 16px;
  height: 16px;
}

.icon-generic {
  @include icon-sprite('icon-hola', 100%, 20px);
}

SassMeister-output.css

.icon-generic {
  width: 16px;
  height: 16px;
}

.icon-generic {
  width: 100% !important;
  height: 20px !important;
}

SassMeister-rendered.html

<div class="icon-hola"></div>