Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

$categories: (
  arts-and-media: (
    color: green
  ),
  business: (
    color: purple
  ),
  human-services: (
    color: pink
  ),
  government-and-law: (
    color: cyan
  ),
  stem-and-medicine: (
    color: orange
  )
);

@each $item, $color in $categories {
  .#{$item}-category {
    background-color: #FFF;
    border: 0.5vw solid map-get(map-get($categories, $item), color);
    border-radius: 50%;
    height: 22.5vw;
    width: 22.5vw;
    padding: 4vw 1vw 0;
  }
}

SassMeister-output.css

.arts-and-media-category {
  background-color: #FFF;
  border: 0.5vw solid green;
  border-radius: 50%;
  height: 22.5vw;
  width: 22.5vw;
  padding: 4vw 1vw 0;
}

.business-category {
  background-color: #FFF;
  border: 0.5vw solid purple;
  border-radius: 50%;
  height: 22.5vw;
  width: 22.5vw;
  padding: 4vw 1vw 0;
}

.human-services-category {
  background-color: #FFF;
  border: 0.5vw solid pink;
  border-radius: 50%;
  height: 22.5vw;
  width: 22.5vw;
  padding: 4vw 1vw 0;
}

.government-and-law-category {
  background-color: #FFF;
  border: 0.5vw solid cyan;
  border-radius: 50%;
  height: 22.5vw;
  width: 22.5vw;
  padding: 4vw 1vw 0;
}

.stem-and-medicine-category {
  background-color: #FFF;
  border: 0.5vw solid orange;
  border-radius: 50%;
  height: 22.5vw;
  width: 22.5vw;
  padding: 4vw 1vw 0;
}