Generated by SassMeister.com.

SassMeister-input-HTML.html

	<ul class="plan-legend">
		<li class="legend-color1">Item 1</li>
		<li class="legend-color2">Item 2</li>
		<li class="legend-color3">Item 3</li>
		<li class="legend-color4">Item 4</li>
		<li class="legend-color5">Item 5</li>
		<li class="legend-color6">Item 6</li>
	</ul>

SassMeister-input.scss

// ----
// Sass (v3.3.9)
// Compass (v1.0.0.alpha.20)
// ----


$legend-colors: (
  color1: #E20074,
  color2: #9F4C97,
  color3: #64B9E4,
  color4: #427BAB,
  color5: #BABD5A,
  color6: #FDD167
);


%legend-color {
    &:before {
    content: '\0020';
    display: inline-block;
    vertical-align: -0.1em;
    width: 1em;
    height: 1em;
    margin-right: 1em;
    transform: rotate(-45deg) skew(20deg, 20deg);
  }
}

@each $i, $color in $legend-colors {
  .legend-#{$i} {
    @extend %legend-color;
    &:before {
      background-color: $color;
    }
  }
}



// only for demo 
ul {
  list-style-type: none;
}

SassMeister-output.css

.legend-color1:before, .legend-color2:before, .legend-color3:before, .legend-color4:before, .legend-color5:before, .legend-color6:before {
  content: '\0020';
  display: inline-block;
  vertical-align: -0.1em;
  width: 1em;
  height: 1em;
  margin-right: 1em;
  transform: rotate(-45deg) skew(20deg, 20deg);
}

.legend-color1:before {
  background-color: #e20074;
}

.legend-color2:before {
  background-color: #9f4c97;
}

.legend-color3:before {
  background-color: #64b9e4;
}

.legend-color4:before {
  background-color: #427bab;
}

.legend-color5:before {
  background-color: #babd5a;
}

.legend-color6:before {
  background-color: #fdd167;
}

ul {
  list-style-type: none;
}

SassMeister-rendered.html

	<ul class="plan-legend">
		<li class="legend-color1">Item 1</li>
		<li class="legend-color2">Item 2</li>
		<li class="legend-color3">Item 3</li>
		<li class="legend-color4">Item 4</li>
		<li class="legend-color5">Item 5</li>
		<li class="legend-color6">Item 6</li>
	</ul>