Adara
@Adara
front-end

Как сделать множественную тень с помощью Stylus?

Привет! Увидела вот такую функцию на 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)


Получается random не пересчитывается, значение box-shadow добавляется только один раз.
Вот неработающий пример codepen.io/Kitana/pen/BNdpqv (но там удобно сразу смотреть compiled css)
Подскажите, как поправить?
  • Вопрос задан
  • 355 просмотров
Решения вопроса 1
Adara
@Adara Автор вопроса
front-end
коллега на работе подсказал:
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
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы