css - 如何在 Stylus 函数中创建多个框阴影

Question

我找到了一个用于创建“starry sci”的 SASS 函数:

// 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)
}

我想将它翻译成 Stylus，但有些东西不起作用。我尝试:

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)

随机函数只运行一个并且box-shadow值只加一次...有人可以帮忙吗？

这是一个 CodePen snippet查看编译后的 CSS

Answer 1

类似于:

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

multiple-box-shadow($n)
  $value = '%spx %spx #FFF' % (random(1, 2000) random(1, 2000))
  for $i in 2..$n
    $value += ', %spx %spx #FFF' % (random(1, 2000) random(1, 2000))

  return unquote($value)

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