如何在 Stylus 函数中创建多个框阴影
How to create multiple box-shadows in a Stylus function
我找到了一个 SASS 用于创建“starry sci”的函数:
// 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
类似于:
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)
我的同事向我推荐了这个解决方案:
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
我找到了一个 SASS 用于创建“starry sci”的函数:
// 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
类似于:
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)
我的同事向我推荐了这个解决方案:
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