Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="icon-grid icon-grid-2"></div>
<div class="icon-grid icon-grid-3"></div>
<div class="icon-grid icon-grid-4"></div>

SassMeister-input.scss

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

$include-icon-grid-classes: true !default;
$icon-grid-class: 'icon-grid' !default;
$icon-grid-number: 4 !default;
$icon-grid-bg: green !default;
$icon-grid-hover-bg: blue !default;
$icon-grid-line-color: #fff !default;
$icon-grid-line-size: 3px !default;
$icon-grid-size: 300px !default;
$icon-grid-spacing: 30px !default;

@mixin icon-grid-base($bg, $size, $line-color, $line-size, $hover-bg, $spacing) {
  background: {
    color: $bg;
    image: 
      // Horizontal lines
      linear-gradient($line-color $line-size, transparent $line-size),
      // Verical lines
      linear-gradient(90deg, $line-color $line-size, transparent $line-size);
    position: 0 0;
  }
  display: inline-block;
  height: $size;
  margin: {
    left: $spacing;
    right: $spacing;
  }
  width: $size;
  &:hover { background-color: $hover-bg; }
  &:first-of-type { margin-left: 0; }
  &:last-of-type { margin-right: 0; }
}
@mixin icon-grid($num-of-lines, $size) {
  background-size: round($size/$num-of-lines) round($size/$num-of-lines);
}

@if $include-icon-grid-classes {
  
  .#{$icon-grid-class} {
    @include icon-grid-base(
      $icon-grid-bg, 
      $icon-grid-size, 
      $icon-grid-line-color, 
      $icon-grid-line-size, 
      $icon-grid-hover-bg,
      $icon-grid-spacing
    );
  }
  
  @for $i from 2 through $icon-grid-number {
    .#{$icon-grid-class}-#{($i)} {
      @include icon-grid($i, $icon-grid-size);
    }
  }
  
}

SassMeister-output.css

.icon-grid {
  background-color: green;
  background-image: linear-gradient(#fff 3px, transparent 3px), linear-gradient(90deg, #fff 3px, transparent 3px);
  background-position: 0 0;
  display: inline-block;
  height: 300px;
  margin-left: 30px;
  margin-right: 30px;
  width: 300px;
}
.icon-grid:hover {
  background-color: blue;
}
.icon-grid:first-of-type {
  margin-left: 0;
}
.icon-grid:last-of-type {
  margin-right: 0;
}

.icon-grid-2 {
  background-size: 150px 150px;
}

.icon-grid-3 {
  background-size: 100px 100px;
}

.icon-grid-4 {
  background-size: 75px 75px;
}

SassMeister-rendered.html

<div class="icon-grid icon-grid-2"></div>
<div class="icon-grid icon-grid-3"></div>
<div class="icon-grid icon-grid-4"></div>