Html 函数中未定义变量

我对编程比较陌生。也就是说，我正在尝试在CodePen上修改CSS动画（没有任何SASS方面的知识，也没有CSS方面的知识），我想实现一个带有星星的动画渐变背景

这是原作：

/*
这里没什么可看的：）
由@screenshake制作
linkedin.com/in/saranhsinha
*/

@导入指南针
//n是所需的星星数
@函数多框阴影（$n）
$value:“#{random（2000）}px#{random（2000）}px#FFF”
@对于从2到n的$i
$value:“#{$value}，#{random（2000）}px#{random（2000）}px#FFF”
@返回unquote（$value）
$shadows小：多框阴影（700）
$shadows中等：多框阴影（200）
$shadows大：多框阴影（100）
html
身高：100%
背景：径向梯度（底部椭圆，#1B2735 0%，#090A0F 100%）
溢出：隐藏
#明星
宽度：1px
高度：1px
背景：透明
框阴影：$小阴影
动画：animStar 50年代线性无限
&：之后
内容：“”
位置：绝对位置
顶部：2000px
宽度：1px
高度：1px
背景：透明
框阴影：$小阴影
#明星2
宽度：2件
高度：2件
背景：透明
长方体阴影：$shadows中等
动画：animStar 100s线性无限
&：之后
内容：“”
位置：绝对位置
顶部：2000px
宽度：2件
高度：2件
背景：透明
长方体阴影：$shadows中等
#明星3
宽度：3倍
高度：3倍
背景：透明
盒子阴影：$大阴影
动画：动画之星150s线性无限
&：之后
内容：“”
位置：绝对位置
顶部：2000px
宽度：3倍
高度：3倍
背景：透明
盒子阴影：$大阴影
#头衔
位置：绝对位置
最高：50%
左：0
右：0
颜色：#FFF
文本对齐：居中
字体系列：“lato”，无衬线
字号：300
字体大小：50px
字母间距：10px
利润上限：-60px
左侧填充：10px
跨度
背景：-webkit线性渐变（白色，#38495a）
-webkit背景剪辑：文本
-webkit文本填充颜色：透明
@关键帧animStar
从…起
转换：translateY（0px）
到
转换：translateY（-2000px）

#明星
#明星2
#明星3
#头衔
%跨度
纯CSS
%溴
%跨度
视差像素星

根据您在此处提供的代码，看起来您在

多框阴影（$n）

函数的范围内声明了

$shadows small

。由于它的作用域位于该函数的内部，因此从外部无法访问它。只需将变量声明移动到全局上下文，即可解决问题

您的原件：

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

---

非常感谢。然而，在这之后，现在我在

&:

之后得到了一个“Invaid CSS”错误，说有一个预期的伪类，而在

之后看到了
，这发生在
#stars
@SheldonAndre。您尝试过将&:after更改为&:after吗？（没有空间）