如何从这个scss函数生成随机颜色?

kpbwa7wx  于 2021-09-13  发布在  Java
关注(0)|答案(1)|浏览(814)

这个函数以 #ff0063 ,但我试图在屏幕上实现过多的彩色像素点。如果可能的话,有人能描述一下代码中到底发生了什么吗?

@function multiple-box-shadow ($n) {
  $value: '#{random(2500)}px #{random(2500)}px #ff006e';
  @for $i from 2 through $n {
    $value: '#{$value} , #{random(2500)}px #{random(2500)}px #ff006e';
  }
  @return unquote($value);
}
7d7tgy0s

7d7tgy0s1#

这个 random() sass中的函数返回从1到您提供的参数的数字。因此,问题中的代码正在创建多个 box-shadow 距离原始元素2500px的任意位置的值。
要向逻辑添加随机颜色,请提供3 random(255) 论据 rgb() ,例如:

@function multiple-box-shadow ($n) {
  $value: '#{random(250)}px #{random(250)}px #ff006e';
  @for $i from 2 through $n {
    $value: '#{$value} , #{random(250)}px #{random(250)}px rgb(#{random(255)}, #{random(255)}, #{random(255)})';
  }
  @return unquote($value);
}

工作示例
请注意,演示使用高达250px的随机定位,以使其更好地适应屏幕。

相关问题