Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>

SassMeister-input.scss

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

@function random-decimal($val) {
  $decimal: random(10) * 0.1;
  @return $decimal;
}

@mixin random-rgba($attr, $color: 255, $alpha: 10) {
  #{$attr}: rgba(random($color), random($color), random($color), random($alpha))
}

.bar {
  width: 30px;
  display: inline-block;
}

@for $i from 1 through 30 {
  .bar {
    &:nth-child(#{$i}) {
      height: random(300) + px;
      @include random-rgba(background-color)
    }
  }
}

SassMeister-output.css

.bar {
  width: 30px;
  display: inline-block;
}

.bar:nth-child(1) {
  height: 288px;
  background-color: #c972c8;
}

.bar:nth-child(2) {
  height: 238px;
  background-color: #f13bd4;
}

.bar:nth-child(3) {
  height: 281px;
  background-color: #181c3d;
}

.bar:nth-child(4) {
  height: 157px;
  background-color: #55a256;
}

.bar:nth-child(5) {
  height: 68px;
  background-color: #a4aff7;
}

.bar:nth-child(6) {
  height: 106px;
  background-color: #56143d;
}

.bar:nth-child(7) {
  height: 236px;
  background-color: #a1fc09;
}

.bar:nth-child(8) {
  height: 10px;
  background-color: #a21af4;
}

.bar:nth-child(9) {
  height: 25px;
  background-color: #86e390;
}

.bar:nth-child(10) {
  height: 153px;
  background-color: #5bbd23;
}

.bar:nth-child(11) {
  height: 88px;
  background-color: #f61e91;
}

.bar:nth-child(12) {
  height: 206px;
  background-color: #c3b151;
}

.bar:nth-child(13) {
  height: 76px;
  background-color: #dce4b3;
}

.bar:nth-child(14) {
  height: 139px;
  background-color: #189bdb;
}

.bar:nth-child(15) {
  height: 141px;
  background-color: #895440;
}

.bar:nth-child(16) {
  height: 296px;
  background-color: #8c6eef;
}

.bar:nth-child(17) {
  height: 280px;
  background-color: #2b2f45;
}

.bar:nth-child(18) {
  height: 231px;
  background-color: #ae33cf;
}

.bar:nth-child(19) {
  height: 133px;
  background-color: #b26b66;
}

.bar:nth-child(20) {
  height: 209px;
  background-color: #b44d8c;
}

.bar:nth-child(21) {
  height: 145px;
  background-color: #240fe7;
}

.bar:nth-child(22) {
  height: 213px;
  background-color: #060dca;
}

.bar:nth-child(23) {
  height: 48px;
  background-color: #81530e;
}

.bar:nth-child(24) {
  height: 118px;
  background-color: #b56e22;
}

.bar:nth-child(25) {
  height: 88px;
  background-color: #7904fb;
}

.bar:nth-child(26) {
  height: 187px;
  background-color: #d2b707;
}

.bar:nth-child(27) {
  height: 172px;
  background-color: #dfddad;
}

.bar:nth-child(28) {
  height: 98px;
  background-color: #c0e8e4;
}

.bar:nth-child(29) {
  height: 299px;
  background-color: #602c1e;
}

.bar:nth-child(30) {
  height: 149px;
  background-color: #0bb3e8;
}

SassMeister-rendered.html

<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>