函数中未定义的变量

Question

我是编程新手。话虽如此，我正在尝试在CodePen上修改CSS动画（没有任何有关SASS的先验知识，并且很少使用CSS），并且我想实现带有星星的动画渐变背景。

这是原始文字：https://codepen.io/saransh/pen/BKJun

/*
Nothing to see here :)
Made by @screenshake
linkedin.com/in/saranshsinha
*/

@import compass


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

    $shadows-small:  multiple-box-shadow(700)
    $shadows-medium: multiple-box-shadow(200)
    $shadows-big:    multiple-box-shadow(100)

html
    height: 100%
    background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%)
    overflow: hidden
    
#stars
    width: 1px
    height: 1px
    background: transparent
    box-shadow: $shadows-small
    animation			: animStar 50s linear infinite
    
    &:after
        content: " "
        position: absolute
        top: 2000px
        width: 1px
        height: 1px
        background: transparent
        box-shadow: $shadows-small
    
#stars2
    width: 2px
    height: 2px
    background: transparent
    box-shadow: $shadows-medium
    animation			: animStar 100s linear infinite
    
    &:after
        content: " "
        position: absolute
        top: 2000px
        width: 2px
        height: 2px
        background: transparent
        box-shadow: $shadows-medium
    
#stars3
    width: 3px
    height: 3px
    background: transparent
    box-shadow: $shadows-big
    animation			: animStar 150s linear infinite
    
    &:after
        content: " "
        position: absolute
        top: 2000px
        width: 3px
        height: 3px
        background: transparent
        box-shadow: $shadows-big

#title
    position: absolute
    top: 50%
    left: 0
    right: 0
  
    color: #FFF
    text-align: center
    font-family: 'lato',sans-serif
    font-weight: 300
    font-size: 50px
    letter-spacing: 10px
  
    margin-top: -60px
    padding-left: 10px
  
    span
        background: -webkit-linear-gradient(white, #38495a)
        -webkit-background-clip: text
        -webkit-text-fill-color: transparent
    
@keyframes animStar
    from	
        transform: translateY(0px)
    to		
        transform: translateY(-2000px)
    

<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
#stars
#stars2
#stars3
#title
    %span
        PURE CSS
    %br
    %span
        PARALLAX PIXEL STARS

这是我的尝试：https://codepen.io/keironss/pen/qMErr

/*
Authored by @screenshake and @keironss
*/

@import compass


@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)
  
    $shadows-small: multiple-box-shadow(625)
    $shadows-medium: multiple-box-shadow(250)
    $shadows-big: multiple-box-shadow(125)
 

html
    height: 100%
    overflow: hidden
    background: linear-gradient(#B0AEC4, #616161)

#stars
    width: .5px
    height: .5px
    background: #C3C3C3
    box-shadow: $shadows-small
    animation: animStar 50s linear infinite
 

    &: after
        content: " "
        position: absolute
        top: 2000px
        width: .5px
        height: .5px
        background: transparent
        box-shadow: $shadows-small

#stars2
    width: 1px
    height: 1px
    background: #7F7E84
    box-shadow: $shadows-medium
    animation: animStar 100s linear infinite

    &: after
        content: " "
        position: absolute
        top: 2000px
        width: 1px
        height: 1px
        background: transparent
        box-shadow: $shadows-medium

#stars3
    width: 2px
    height: 2px
    background: #626264
    box-shadow: $shadows-big
    animation: animStar 150s linear infinite

    &: after
        content: " "
        position: absolute
        top: 2000px
        width: 2px
        height: 2px
        background: transparent
        box-shadow: $shadows-big

@keyframes animStar
    from	transform: translateY(0px)
    to	transform: translateY(-2000px)

#r-stars
    width: .5px
    height: .5px
    background: #626264
    box-shadow: $shadows-small
    animation: r-animStar 50s linear infinite

    &: after
        content: " "
        position: absolute
        top: 2000px
        width: .5px
        height: .5px
        background: transparent
        box-shadow: $shadows-small

#r-stars2
    width: 1px
    height: 1px
    background: #7F7E84
    box-shadow: $shadows-medium
    animation: r-animStar 100s linear infinite

    &: after
        content: " "
        position: absolute
        top: 2000px
        width: 1px
        height: 1px
        background: transparent
        box-shadow: $shadows-medium


#r-stars3
    width: 2px
    height: 2px
    background: #C3C3C3-
    box-shadow: $shadows-big
    animation: r-animStar 150s linear infinite

    &: after
        content: " "
        position: absolute
        top: 2000px
        width: 2px
        height: 2px
        background: transparent
        box-shadow: $shadows-big

@keyframes r-animStar
    from
        transform: translateY(-2000px)
    to
        transform: translateY(0px)

#stars
#stars2
#stars3
#r-stars
#r-stars2
#r-stars3

在开发此程序时，我遇到了很多错误。以前的问题主要是缩进错误，但是现在，每当我尝试在CodePen中编码主题时，问题是$shadows-small在#stars路径中是未定义的，而且似乎只在此处弹出。

任何人都可以提供帮助吗？

Answer 1

根据您在此处提供的代码，您似乎在$shadows-small函数范围内声明了multiple-box-shadow ($n)。由于它是此功能的内部作用域，因此从外部无法访问。只需将变量声明移至全局上下文即可解决您的问题。 (View the updated pen)

您的原件：

@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)

  $shadows-small:  multiple-box-shadow(700)
  $shadows-medium: multiple-box-shadow(200)
  $shadows-big:    multiple-box-shadow(100)

更正的版本：

@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)

$shadows-small:  multiple-box-shadow(700)
$shadows-medium: multiple-box-shadow(200)
$shadows-big:    multiple-box-shadow(100)