Generated by SassMeister.com.

SassMeister-input-HTML.html

<h1>We Simplify</h1>

SassMeister-input.scss

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

/*
 * will generate an icon helper class for different sized icons
 * usage:
 *      @include icons("icons", 32, 10 14 16 25, "px")
 */

@mixin icons ($className: "icon", $defaultSize: 32, $iconSizes: 10 14 16 21 32, $unit: "px") {
    .#{$className} {
        display: inline-block;
        background-size: 100% 100%;
        background-position: center center;
        vertical-align: middle;
        width: #{$defaultSize}#{$unit}; height: #{$defaultSize}#{$unit};
    }
    @each $size in $iconSizes {
        .#{$className}[class*="--#{$size}"]{
            width: #{$size}#{$unit};
            height: #{$size}#{$unit};
        }
    }
}

@include icons("foo", 1.4, 1 1.2 1.4 1.5, "rem");

SassMeister-output.css

/*
 * will generate an icon helper class for different sized icons
 * usage:
 *      @include icons("icons", 32, 10 14 16 25, "px")
 */
.foo {
  display: inline-block;
  background-size: 100% 100%;
  background-position: center center;
  vertical-align: middle;
  width: 1.4rem;
  height: 1.4rem;
}

.foo[class*="--1"] {
  width: 1rem;
  height: 1rem;
}

.foo[class*="--1.2"] {
  width: 1.2rem;
  height: 1.2rem;
}

.foo[class*="--1.4"] {
  width: 1.4rem;
  height: 1.4rem;
}

.foo[class*="--1.5"] {
  width: 1.5rem;
  height: 1.5rem;
}

SassMeister-rendered.html

<h1>We Simplify</h1>