K
K
Kitana2015-06-16 11:17:48
css
Kitana, 2015-06-16 11:17:48

How to make multiple shadow with Stylus?

Hey! I saw this function on SASS (to make a starry sky):

// 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 rewrite it for Stylus, but it doesn't work. Here's what I've tried:
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)

It turns out that random is not recalculated, the box-shadow value is added only once.
Here is a non-working example codepen.io/Kitana/pen/BNdpqv (but it's convenient to look at the compiled css right away)
Tell me how to fix it?

Answer the question

In order to leave comments, you need to log in

1 answer(s)
K
Kitana, 2015-06-16
@Adara

A colleague at work said:

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

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question