时间戳

首页 > 解决方案 > 如何将此代码转换为纯 CSS 或在 Javascript 中使用此代码？

javascript - 如何将此代码转换为纯 CSS 或在 Javascript 中使用此代码？

问题描述

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

解释

这段代码应该会在完成后产生随机的 {START} 之类的球作为背景，我似乎无法使用 Scss 并想看看它是否仍然可以使用不同的方法创建

标签： javascriptcsssass

解决方案

我认为，您的 .scss 的正确语法应该是这样的：

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

p{
  box-shadow: $shadows-small;
}

您可以尝试将此代码放入编译器https://www.sassmeister.com/中进行检查。除此之外，如果您需要使用简单的 .css 并放置随机阴影，我认为您需要使用 JS。

推荐阅读