Generated by SassMeister.com.

SassMeister-input-HTML.html

			<ul>
				<li class="next">kerning</li>
				<li class="next">leading</li>
				<li class="next">dpi</li>
				<li class="next">rgb</li>
				<li class="next">cmyk</li>
				<li class="next">sass</li>
				<li class="next">push</li>
				<li class="next">pull request</li>
				<li class="next">gulp</li>
				<li class="next">grunt</li>
				<li class="next">npm</li>
				<li class="next">bundle</li>
				<li class="next">packages</li>
				<li class="next stay">git</li>
				<li class="next">json</li>
				<li class="next">serif</li>
				<li class="next">terminal</li>
				<li class="next">point</li>
				<li class="next">gutter</li>
				<li class="next">html</li>
				<li class="next">svg</li>
				<li class="next">ppi</li>
				<li class="next">vector</li>
				<li class="next">raster</li>
				<li class="next">crop</li>
				<li class="next">orphan</li>
				<li class="next">rag</li>
				<li class="next">import</li>
			</ul>

SassMeister-input.scss

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

.next {
  display: block;
  position: absolute;
  background: lavender;
  padding: .5em 1em;
}

ul {
  li {
  $li-num: 30;
    @for $i from 1 through $li-num {
      &:nth-child(#{$i}){
        top: (random()*5)*(random()*100)+px;
        left: (random()*10)*(random()*100)+px;
        
        @if ($i%2 == 0) { //even ones are positive rotation
          transform: rotate((random()*10)+deg);
        }
        
        @else { //odd are negative rotation
          transform: rotate((random()*-10)+deg);
        }
      }
    }
  }
}

SassMeister-output.css

.next {
  display: block;
  position: absolute;
  background: lavender;
  padding: .5em 1em;
}

ul li:nth-child(1) {
  top: 55.0878px;
  left: 565.09365px;
  transform: rotate(-7.57516deg);
}
ul li:nth-child(2) {
  top: 130.15745px;
  left: 338.53285px;
  transform: rotate(0.45521deg);
}
ul li:nth-child(3) {
  top: 236.07341px;
  left: 278.88552px;
  transform: rotate(-6.82881deg);
}
ul li:nth-child(4) {
  top: 9.32292px;
  left: 71.52613px;
  transform: rotate(3.47565deg);
}
ul li:nth-child(5) {
  top: 151.28279px;
  left: 340.74495px;
  transform: rotate(-6.66575deg);
}
ul li:nth-child(6) {
  top: 9.67404px;
  left: 244.72982px;
  transform: rotate(6.69727deg);
}
ul li:nth-child(7) {
  top: 126.8101px;
  left: 645.88718px;
  transform: rotate(-4.49244deg);
}
ul li:nth-child(8) {
  top: 41.57379px;
  left: 124.05391px;
  transform: rotate(9.69618deg);
}
ul li:nth-child(9) {
  top: 37.58588px;
  left: 512.78532px;
  transform: rotate(-9.4794deg);
}
ul li:nth-child(10) {
  top: 83.66653px;
  left: 429.73707px;
  transform: rotate(4.28756deg);
}
ul li:nth-child(11) {
  top: 297.09179px;
  left: 68.27215px;
  transform: rotate(-7.42738deg);
}
ul li:nth-child(12) {
  top: 10.6581px;
  left: 126.69131px;
  transform: rotate(6.35967deg);
}
ul li:nth-child(13) {
  top: 265.10798px;
  left: 62.59841px;
  transform: rotate(-8.65679deg);
}
ul li:nth-child(14) {
  top: 281.03327px;
  left: 87.52675px;
  transform: rotate(9.77627deg);
}
ul li:nth-child(15) {
  top: 255.20723px;
  left: 323.04232px;
  transform: rotate(-2.36804deg);
}
ul li:nth-child(16) {
  top: 90.59845px;
  left: 344.96572px;
  transform: rotate(9.71021deg);
}
ul li:nth-child(17) {
  top: 112.22701px;
  left: 83.25925px;
  transform: rotate(-3.14094deg);
}
ul li:nth-child(18) {
  top: 15.62591px;
  left: 750.7659px;
  transform: rotate(1.02049deg);
}
ul li:nth-child(19) {
  top: 138.38814px;
  left: 712.67297px;
  transform: rotate(-4.18075deg);
}
ul li:nth-child(20) {
  top: 317.19219px;
  left: 8.20777px;
  transform: rotate(2.01732deg);
}
ul li:nth-child(21) {
  top: 144.62357px;
  left: 303.02946px;
  transform: rotate(-3.84788deg);
}
ul li:nth-child(22) {
  top: 211.55468px;
  left: 351.17903px;
  transform: rotate(4.66281deg);
}
ul li:nth-child(23) {
  top: 17.66722px;
  left: 80.69076px;
  transform: rotate(-8.43013deg);
}
ul li:nth-child(24) {
  top: 357.36136px;
  left: 349.32719px;
  transform: rotate(0.84265deg);
}
ul li:nth-child(25) {
  top: 320.59794px;
  left: 372.08179px;
  transform: rotate(-5.72597deg);
}
ul li:nth-child(26) {
  top: 108.15859px;
  left: 643.67976px;
  transform: rotate(4.87562deg);
}
ul li:nth-child(27) {
  top: 8.8811px;
  left: 435.234px;
  transform: rotate(-5.79663deg);
}
ul li:nth-child(28) {
  top: 26.05502px;
  left: 685.31196px;
  transform: rotate(4.68581deg);
}
ul li:nth-child(29) {
  top: 160.70861px;
  left: 66.01059px;
  transform: rotate(-2.03681deg);
}
ul li:nth-child(30) {
  top: 218.92815px;
  left: 146.47974px;
  transform: rotate(7.26659deg);
}

SassMeister-rendered.html

			<ul>
				<li class="next">kerning</li>
				<li class="next">leading</li>
				<li class="next">dpi</li>
				<li class="next">rgb</li>
				<li class="next">cmyk</li>
				<li class="next">sass</li>
				<li class="next">push</li>
				<li class="next">pull request</li>
				<li class="next">gulp</li>
				<li class="next">grunt</li>
				<li class="next">npm</li>
				<li class="next">bundle</li>
				<li class="next">packages</li>
				<li class="next stay">git</li>
				<li class="next">json</li>
				<li class="next">serif</li>
				<li class="next">terminal</li>
				<li class="next">point</li>
				<li class="next">gutter</li>
				<li class="next">html</li>
				<li class="next">svg</li>
				<li class="next">ppi</li>
				<li class="next">vector</li>
				<li class="next">raster</li>
				<li class="next">crop</li>
				<li class="next">orphan</li>
				<li class="next">rag</li>
				<li class="next">import</li>
			</ul>