SASS中如何随机生成浮点数（用于透明度）和百分比（用于定位）？

没问题，我来帮你搞定这两个需求，顺便解决你遇到的百分比定位无效的问题～

一、生成随机透明度浮点数 #

SASS自带的random()函数默认返回整数，但透明度需要的是0到1之间的浮点数，我们可以通过除法来实现：

// 自定义函数：返回0.01到1之间的随机透明度值（若要包含0，可改成 random(101)/100 - 0.01）
@function random-opacity() {
  @return random(100) / 100;
}

// 使用示例
.transparent-box {
  opacity: random-opacity();
  background: #2c3e50;
}

如果需要更高精度（比如三位小数），只需要把除数和随机数范围放大，比如random(1000)/1000即可。

二、生成用于定位的随机百分比（解决%单位无效问题） #

你之前用%单位时没生效，大概率是因为直接写了random(100)%——SASS会把这个当成数学运算而非单位拼接，所以必须用#{}插值语法把数值转换成字符串后再和%结合。

这里给你写一个支持自定义范围的百分比生成函数：

// 自定义函数：生成min到max之间的随机百分比（默认0%-100%）
@function random-percentage($min: 0, $max: 100) {
  @return #{random($max - $min) + $min}%;
}

// 使用示例
.positioned-element {
  position: absolute;
  top: random-percentage(); // 0%-100%随机
  left: random-percentage(20, 80); // 限定在20%-80%之间
}

三、完整综合示例 #

把两个函数结合起来，实现随机定位+随机透明度的元素：

@function random-opacity() {
  @return random(100) / 100;
}

@function random-percentage($min: 0, $max: 100) {
  @return #{random($max - $min) + $min}%;
}

.random-item {
  position: absolute;
  top: random-percentage();
  left: random-percentage();
  opacity: random-opacity();
  width: 40px;
  height: 40px;
  background: #e74c3c;
  border-radius: 50%;
}

内容的提问来源于stack exchange，提问作者Ivan Topić