Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="fpo-container">
  <div class="fpo fpo--1"></div>
  <div class="fpo fpo--2"></div>
  <div class="fpo fpo--3"></div>
  <div class="fpo fpo--4"></div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

$fpo-warn: true !default;

@mixin ratioHeight ($height-ratio:1) {
  overflow: hidden;
  position: relative;

  &:before {
    content: '';
    display: block;
    padding-bottom: percentage($height-ratio);
  }
}

@mixin fpo($args: ()) {
  $_defaults: (
    ratio: 1,
    color: rgb(random(255), random(255), random(255)),
    font: bold 20px/1 sans-serif,
    text: 'FPO'
  );
  $params: map-merge($_defaults, $args);

  @include ratioHeight(map-get($params, 'ratio'));
  background-color: map-get($params, 'color');
  color: invert(map-get($params, 'color'));

  &:after {
    content: map-get($params, 'text');
    font: map-get($params, 'font');
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  @if ($fpo-warn) {
    @warn 'FPO elements being used.';
  }
}

%fpo-prototype {
  display: inline-block;
  width: 20%;
}

.fpo-container {
  display: flex;
  justify-content: space-around;
}

.fpo {
  @extend %fpo-prototype;
  // Define multiple classes so each is a distinct color
  @for $i from 1 through 4 {
    &--#{$i} {
      @include fpo();
    }
  }
}

SassMeister-output.css

.fpo {
  display: inline-block;
  width: 20%;
}

.fpo-container {
  display: flex;
  justify-content: space-around;
}

.fpo--1 {
  overflow: hidden;
  position: relative;
  background-color: #14e765;
  color: #eb189a;
}
.fpo--1:before {
  content: '';
  display: block;
  padding-bottom: 100%;
}
.fpo--1:after {
  content: "FPO";
  font: bold 20px/1 sans-serif;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}
.fpo--2 {
  overflow: hidden;
  position: relative;
  background-color: #c8509f;
  color: #37af60;
}
.fpo--2:before {
  content: '';
  display: block;
  padding-bottom: 100%;
}
.fpo--2:after {
  content: "FPO";
  font: bold 20px/1 sans-serif;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}
.fpo--3 {
  overflow: hidden;
  position: relative;
  background-color: #35d4d3;
  color: #ca2b2c;
}
.fpo--3:before {
  content: '';
  display: block;
  padding-bottom: 100%;
}
.fpo--3:after {
  content: "FPO";
  font: bold 20px/1 sans-serif;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}
.fpo--4 {
  overflow: hidden;
  position: relative;
  background-color: #a297f9;
  color: #5d6806;
}
.fpo--4:before {
  content: '';
  display: block;
  padding-bottom: 100%;
}
.fpo--4:after {
  content: "FPO";
  font: bold 20px/1 sans-serif;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

SassMeister-rendered.html

<div class="fpo-container">
  <div class="fpo fpo--1"></div>
  <div class="fpo fpo--2"></div>
  <div class="fpo fpo--3"></div>
  <div class="fpo fpo--4"></div>
</div>