html - 变量未在函数内定义

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

根据您在此处提供的代码，您似乎在 multiple-box-shadow ($n) 的范围内声明了 $shadows-small > 功能。由于它在这个函数的范围内，因此无法从外部访问它。只需将变量声明移至全局上下文即可解决您的问题。 (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)