Generated by SassMeister.com.

SassMeister-input-HTML.html

	<ul class="random-words">
		<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)
// ----

.random-words {
  li {
    display: block;
    position: absolute;
    font-size: 2.5em;
    background: lavender;
    padding: .5em 1em;
  
  $li-num: 30;
    @for $i from 1 through $li-num {
      &:nth-child(#{$i}){
        top: random(80)+vh;
        left: random(85)+vw;
        
        @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

.random-words li {
  display: block;
  position: absolute;
  font-size: 2.5em;
  background: lavender;
  padding: .5em 1em;
}
.random-words li:nth-child(1) {
  top: 48vh;
  left: 52vw;
  transform: rotate(-3.32422deg);
}
.random-words li:nth-child(2) {
  top: 71vh;
  left: 34vw;
  transform: rotate(4.86644deg);
}
.random-words li:nth-child(3) {
  top: 68vh;
  left: 82vw;
  transform: rotate(-6.04202deg);
}
.random-words li:nth-child(4) {
  top: 12vh;
  left: 67vw;
  transform: rotate(7.89256deg);
}
.random-words li:nth-child(5) {
  top: 58vh;
  left: 85vw;
  transform: rotate(-6.06091deg);
}
.random-words li:nth-child(6) {
  top: 42vh;
  left: 55vw;
  transform: rotate(8.93604deg);
}
.random-words li:nth-child(7) {
  top: 45vh;
  left: 5vw;
  transform: rotate(-6.36754deg);
}
.random-words li:nth-child(8) {
  top: 30vh;
  left: 18vw;
  transform: rotate(7.2861deg);
}
.random-words li:nth-child(9) {
  top: 9vh;
  left: 31vw;
  transform: rotate(-9.52162deg);
}
.random-words li:nth-child(10) {
  top: 28vh;
  left: 8vw;
  transform: rotate(5.34288deg);
}
.random-words li:nth-child(11) {
  top: 17vh;
  left: 36vw;
  transform: rotate(-9.39898deg);
}
.random-words li:nth-child(12) {
  top: 47vh;
  left: 45vw;
  transform: rotate(0.91005deg);
}
.random-words li:nth-child(13) {
  top: 68vh;
  left: 16vw;
  transform: rotate(-7.60862deg);
}
.random-words li:nth-child(14) {
  top: 29vh;
  left: 20vw;
  transform: rotate(1.67116deg);
}
.random-words li:nth-child(15) {
  top: 42vh;
  left: 68vw;
  transform: rotate(-4.37228deg);
}
.random-words li:nth-child(16) {
  top: 14vh;
  left: 21vw;
  transform: rotate(5.61662deg);
}
.random-words li:nth-child(17) {
  top: 3vh;
  left: 55vw;
  transform: rotate(-7.74657deg);
}
.random-words li:nth-child(18) {
  top: 75vh;
  left: 24vw;
  transform: rotate(8.98467deg);
}
.random-words li:nth-child(19) {
  top: 39vh;
  left: 45vw;
  transform: rotate(-7.99386deg);
}
.random-words li:nth-child(20) {
  top: 49vh;
  left: 85vw;
  transform: rotate(7.46357deg);
}
.random-words li:nth-child(21) {
  top: 30vh;
  left: 1vw;
  transform: rotate(-0.691deg);
}
.random-words li:nth-child(22) {
  top: 14vh;
  left: 54vw;
  transform: rotate(0.1097deg);
}
.random-words li:nth-child(23) {
  top: 15vh;
  left: 50vw;
  transform: rotate(-4.10037deg);
}
.random-words li:nth-child(24) {
  top: 68vh;
  left: 72vw;
  transform: rotate(2.67489deg);
}
.random-words li:nth-child(25) {
  top: 6vh;
  left: 45vw;
  transform: rotate(-9.22832deg);
}
.random-words li:nth-child(26) {
  top: 42vh;
  left: 18vw;
  transform: rotate(9.80321deg);
}
.random-words li:nth-child(27) {
  top: 76vh;
  left: 11vw;
  transform: rotate(-4.51865deg);
}
.random-words li:nth-child(28) {
  top: 28vh;
  left: 22vw;
  transform: rotate(2.00171deg);
}
.random-words li:nth-child(29) {
  top: 27vh;
  left: 26vw;
  transform: rotate(-8.18027deg);
}
.random-words li:nth-child(30) {
  top: 9vh;
  left: 7vw;
  transform: rotate(3.83084deg);
}

SassMeister-rendered.html

	<ul class="random-words">
		<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>