Scatter a group of elements randomly with Sass/Compass

random.html

<i class="star-1">1</i>
<i class="star-2">2</i>
<i class="star-3">3</i>
<i class="star-4">4</i>
<i class="star-5">5</i>
<i class="star-6">6</i>
<i class="star-7">7</i>
<i class="star-8">8</i>
<i class="star-9">9</i>
<i class="star-10">10</i>
<i class="star-11">11</i>
<i class="star-12">12</i>
<i class="star-13">13</i>
<i class="star-14">14</i>
<i class="star-15">15</i>
<i class="star-16">16</i>
<i class="star-17">17</i>
<i class="star-18">18</i>
<i class="star-19">19</i>
<i class="star-20">20</i>
<i class="star-21">21</i>
<i class="star-22">22</i>
<i class="star-23">23</i>
<i class="star-24">24</i>
<i class="star-25">25</i>
<i class="star-26">26</i>
<i class="star-27">27</i>
<i class="star-28">28</i>

random.rb

# Using Compass - paste this in project config.rb file
# Found on Chris Eppstein's gist: https://gist.github.com/1561650
# This will generate numbers between 1 - 2000
# I'm no programmer and did a fair amount of flailing about before I got this working, so feel free to critique.


module Sass::Script::Functions
  def random(max = Sass::Script::Number.new(2000))
    Sass::Script::Number.new(rand(max.value), max.numerator_units, max.denominator_units)
  end
end

random.scss

@for $i from 1 through 28 {
  .star-#{$i} { 
  		position: absolute;
		display: block;
  		top: random()/2+px; // maybe we don't need such big numbers for vertical position
		left: random()+px; 
	}
}