如何在SCSS @for循环中通过元素data属性指定循环长度？

嘿，这个问题其实戳中了SCSS的核心特性——它是预处理器，在浏览器渲染页面、加载DOM元素之前就已经编译成普通CSS了，所以直接在@for循环里读取元素的data属性值是行不通的哦！不过根据你的场景，我们可以分两种情况来解决：

情况1：data属性值是编译时已知的静态值 #

如果你的.fesa-info元素的data-fesa-num是固定不变的（比如静态页面写死的8），那可以直接把这个数值定义成SCSS变量，替换代码里的10就行：

// 把data属性的数值定义为SCSS变量
$loop-length: 8;

@for $i from 1 through $loop-length {
  .box:nth-of-type(#{$i}) {
    background-color: darken(cornflowerblue, 0% + $i);
  }
}

要是你用的是静态站点生成工具（比如Jekyll、Eleventy），还可以直接从模板的元素属性里把值传递给SCSS变量，具体配置要看你用的工具，但核心思路都是把静态值提前注入到SCSS编译流程里。

情况2：data属性值是运行时动态变化的 #

如果这个数值是后端渲染、JS动态设置的（编译时没法确定），那就得结合JavaScript来处理了，因为只有JS能在页面运行时读取DOM的data属性，然后生成对应的样式：

步骤1：读取data属性值 #

const infoElement = document.querySelector('.fesa-info');
// 把data属性值转成数字
const loopLength = parseInt(infoElement.dataset.fesaNum, 10);

步骤2：动态生成样式（模拟SCSS的darken效果） #

我们可以用JS创建style标签，然后循环生成对应的背景色规则：

const style = document.createElement('style');
let cssContent = '';

// cornflowerblue的RGB基础值
const baseColor = { r: 100, g: 149, b: 237 };

for (let i = 1; i <= loopLength; i++) {
  // 模拟SCSS的darken函数，按比例加深颜色
  const darkenRatio = i / 100;
  const darkenedR = Math.max(0, Math.floor(baseColor.r * (1 - darkenRatio)));
  const darkenedG = Math.max(0, Math.floor(baseColor.g * (1 - darkenRatio)));
  const darkenedB = Math.max(0, Math.floor(baseColor.b * (1 - darkenRatio)));

  cssContent += `.box:nth-of-type(${i}) { background-color: rgb(${darkenedR}, ${darkenedG}, ${darkenedB}); }\n`;
}

// 把生成的样式插入到页面头部
style.textContent = cssContent;
document.head.appendChild(style);

这种方法完全适配动态变化的data属性值，而且能精准模拟你原来SCSS代码里的颜色加深逻辑。

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