Generated by SassMeister.com.

SassMeister-input-HTML.html

<ul>
  <li class="max">Max</li>
  <li class="bus">Bus</li>
  <li class="streetcar">Streetcar</li>
  <li class="bicycle">Bicycle</li>
</ul>

SassMeister-input.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.0)
// ----

$colors: (
  'max': #f13198,
  'bus': #7fdb59,
  'streetcar': #dae445,
  'bicycle': #29a9d6,
);

@each $name, $color in $colors {
  .#{$name} {
    background-color: darken( $color, 10% );
    border-left: 8px solid $color;
  }
}

/** Formatting only **/
ul {
  padding: 0;
  display: flex;
  li {
    flex-grow: 1;
    list-style-type: none;
    padding: .5em .25em;
    text-align: center;
    color: white;
    font-family: sans-serif;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: .8em;
  }
}

SassMeister-output.css

.max {
  background-color: #e00f7f;
  border-left: 8px solid #f13198;
}

.bus {
  background-color: #5fd22f;
  border-left: 8px solid #7fdb59;
}

.streetcar {
  background-color: #cbd71f;
  border-left: 8px solid #dae445;
}

.bicycle {
  background-color: #2187ab;
  border-left: 8px solid #29a9d6;
}

/** Formatting only **/
ul {
  padding: 0;
  display: flex;
}
ul li {
  flex-grow: 1;
  list-style-type: none;
  padding: .5em .25em;
  text-align: center;
  color: white;
  font-family: sans-serif;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .8em;
}

SassMeister-rendered.html

<ul>
  <li class="max">Max</li>
  <li class="bus">Bus</li>
  <li class="streetcar">Streetcar</li>
  <li class="bicycle">Bicycle</li>
</ul>