cssstylus

How to create multiple box-shadows in a Stylus function


I found a SASS function for "starry sci" creating:

// n is number of stars required
@function multiple-box-shadow ($n) 
  $value: '#{random(2000)}px #{random(2000)}px #FFF'
  @for $i from 2 through $n
    $value: '#{$value} , #{random(2000)}px #{random(2000)}px #FFF'

  @return unquote($value)

#stars{
    box-shadow: multiple-box-shadow(700)
}

I want to translate it to Stylus, but something doesn't work. I try:

random(min, max)
  return floor( math(0, "random") * max + min )

$coordinates = random(1, 2000)px 
$distortion = random(1, 20)px

// n is number of stars required
multiple-box-shadow($n)
  for $i in (1..$n)
    $value = $coordinates  $coordinates $distortion $distortion  #FFFFFF,
    return $value

#stars
    box-shadow multiple-box-shadow(700)

random function run only ones and the box-shadow value add only once... Can anybody help?

Here's a CodePen snippet to view compiled CSS


Solution

  • My colleague suggested this solution to me:

    random(min, max)
      return floor( math(0, "random") * max + min )
    
    // n is number of stars required
    multiple-box-shadow($n)
      $coordinates = random(1, 2000)px 
      $distortion = random(1, 20)px
      $value = $coordinates $coordinates $distortion $distortion  #FFFFFF
      for $i in (2..$n)
        $coordinates = random(1, 2000)px 
        $distortion = random(1, 20)px
        $value = $value, $coordinates $coordinates $distortion $distortion  #FFFFFF
      return $value