Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="outer">
  <div class="inner">foo</div>
  <div class="inner">bar</div>
  <div class="inner">bar</div>
  <div class="inner">bar</div>
</div>

SassMeister-input.scss

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

.company-side-bubble {
    // don't ask why I picked Y over X, it's just the way I drew it out...
    $y-pattern: 0, 25, 50, 25, 0, -25, -50, -25;
    // the x-pattern is offset from the y-pattern by -2
    // so if y is 3, then x is 1... if y is 5, then x is 3
    // that means when y is 1, then x has to be 7, because the pattern wraps around
    @for $i from 1 through length($y-pattern) {
        &:nth-of-type(#{$i}) {
            $pos: if($i < 3, length($y-pattern) - 2 + $i, $i - 2);
            x: nth($y-pattern, $pos);
            y: nth($y-pattern, $i);
            pos: $pos;
        }
    }
}

SassMeister-output.css

.company-side-bubble:nth-of-type(1) {
  x: -50;
  y: 0;
  pos: 7;
}
.company-side-bubble:nth-of-type(2) {
  x: -25;
  y: 25;
  pos: 8;
}
.company-side-bubble:nth-of-type(3) {
  x: 0;
  y: 50;
  pos: 1;
}
.company-side-bubble:nth-of-type(4) {
  x: 25;
  y: 25;
  pos: 2;
}
.company-side-bubble:nth-of-type(5) {
  x: 50;
  y: 0;
  pos: 3;
}
.company-side-bubble:nth-of-type(6) {
  x: 25;
  y: -25;
  pos: 4;
}
.company-side-bubble:nth-of-type(7) {
  x: 0;
  y: -50;
  pos: 5;
}
.company-side-bubble:nth-of-type(8) {
  x: -25;
  y: -25;
  pos: 6;
}

SassMeister-rendered.html

<div class="outer">
  <div class="inner">foo</div>
  <div class="inner">bar</div>
  <div class="inner">bar</div>
  <div class="inner">bar</div>
</div>