如何在SCSS/CSS中生成百分比随机数？现有代码失效求助

你的代码无法运行是因为calc()语法错误——你把random(101)-50的结果和%直接拼接，导致生成的CSS属性值格式无效（比如calc(75) - 50%）。不用JS完全可以实现需求，以下是两种可行的SCSS方案：

方案1：直接计算目标范围的随机值 #

SCSS的random(n)会生成1到n的整数，我们需要50-100的数值，直接通过random(51) + 49计算（1+49=50，51+49=100），再用插值语法#{}拼接百分号：

.star{ 
  position: absolute; 
  background-color: #f00; 
  width: 10px; 
  height: 10px; 
  border-radius: 50%; 
} 
@for $i from 1 through 30 { 
  .star:nth-child(#{$i}) { 
    top: #{random(51) + 49}%; 
    left: #{random(51) + 49}%; 
  } 
}

编译后会直接生成类似top: 68%;的有效CSS属性值，星星会均匀分布在父元素的50%-100%区域。

方案2：用calc()实现动态计算（适合需要基础偏移的场景） #

如果需要基于基础值做动态调整，可把百分号放在calc内部，通过random(51) - 1生成0-50的随机数，再和50%相加，覆盖50%-100%的范围：

.star{ 
  position: absolute; 
  background-color: #f00; 
  width: 10px; 
  height: 10px; 
  border-radius: 50%; 
} 
@for $i from 1 through 30 { 
  .star:nth-child(#{$i}) { 
    top: calc(50% + #{random(51) - 1}%); 
    left: calc(50% + #{random(51) - 1}%); 
  } 
}

注意：纯原生CSS没有随机函数，必须依靠预处理器（如SCSS）实现无JS的随机布局。

内容的提问来源于stack exchange，提问作者BlackStar1991