变量未在函数内定义

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)

变量未在函数内定义

Variable not defined within function

html

css

sass

codepen