Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.6)
// Compass (v1.0.1)
// ----

@mixin icon($icon, $top, $left, $color, $atts: null) {
  .icon-#{$icon} {
    top: $top;
    left: $left;

    .color-fill {
      background: $color;
    }

    @if ($atts != null) {
      &:before {
        @each $key, $value in $atts {
          #{$key}: $value;
        }
      }
    }
  }
}

// Individual icons
@include icon('fire', 37%, 24%, #dc3c3d);
@include icon('water', 64%, 66%, #535aa1, ('margin-top': 10px));

SassMeister-output.css

.icon-fire {
  top: 37%;
  left: 24%;
}
.icon-fire .color-fill {
  background: #dc3c3d;
}

.icon-water {
  top: 64%;
  left: 66%;
}
.icon-water .color-fill {
  background: #535aa1;
}
.icon-water:before {
  margin-top: 10px;
}