如何在Sass函数中使用CSS变量？解决random函数报错问题

Sass 是预处理器，所有函数（包括random()）在编译阶段就会执行计算，而 CSS 变量（var(--bottom-value)）是浏览器运行阶段才会解析的动态值。当你把var(--bottom-value)传给random()时，Sass 编译时只能拿到字符串"var(--bottom-value)"，并非数字类型，因此会抛出$limit: "var(--bottom-value)" is not a number for random'`的错误。

既然页面高度是通过JS获取的，直接在JS里生成多组box-shadow参数，再设置到元素上，完全绕开Sass编译时的限制：

// 获取页面高度
const pageHeight = Math.max(
  document.body.scrollHeight, 
  document.body.offsetHeight,
  document.documentElement.clientHeight, 
  document.documentElement.scrollHeight, 
  document.documentElement.offsetHeight
);

// 生成n组box-shadow的函数
function generateMultipleBoxShadow(n, maxSize) {
  const shadows = [];
  for (let i = 0; i < n; i++) {
    const x = Math.floor(Math.random() * maxSize);
    const y = Math.floor(Math.random() * maxSize);
    shadows.push(`${x}px ${y}px #FFF`);
  }
  return shadows.join(', ');
}

// 调用函数生成阴影（示例：生成5组）
const boxShadowValue = generateMultipleBoxShadow(5, pageHeight);

// 设置到目标元素上
document.querySelector('.your-target-element').style.boxShadow = boxShadowValue;

如果需要响应窗口大小变化，可添加resize事件监听：

window.addEventListener('resize', () => {
  const newPageHeight = Math.max(
    document.body.scrollHeight, 
    document.body.offsetHeight,
    document.documentElement.clientHeight, 
    document.documentElement.scrollHeight, 
    document.documentElement.offsetHeight
  );
  const newBoxShadowValue = generateMultipleBoxShadow(5, newPageHeight);
  document.querySelector('.your-target-element').style.boxShadow = newBoxShadowValue;
});

如果页面高度是固定值，或能在编译前获取到，可通过构建工具将高度值注入Sass编译流程。以Webpack的sass-loader为例：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              // 注入全局Sass变量（pageHeight需为Node环境下获取的静态高度）
              additionalData: `$page-height: ${pageHeight};`,
            },
          },
        ],
      },
    ],
  },
};

修改后的Sass函数：

@function multiple-box-shadow($n) {
    $value: '#{random($page-height)}px #{random($page-height)}px #FFF';
    @for $i from 2 through $n {
        $value: '#{$value} , #{random($page-height)}px #{random($page-height)}px #FFF';
    }
    @return unquote($value);
}

注意：此方法仅适用于静态高度场景，窗口resize后无法自动更新阴影值。

内容的提问来源于stack exchange，提问作者Dr.Powar