Sass 错误：var(--num) 不是数字 - 解决方法 - 常规

Sass 错误：'var(--num)' 不是数字 - 解决方法

在使用 Sass 时，你可能遇到过 SassError: var(--num) is not a number 的错误信息。这个错误通常出现在使用 @for 指令循环时，并尝试使用 var(--num) 作为循环上限。

错误原因：

var(--num) 是一个 CSS 变量，它本身并不代表一个数字。在 @for 指令中，循环上限必须是一个明确的数字。

解决方案：

将 CSS 变量值定义为数字： 在使用 var(--num) 之前，需要确保它已经被赋值为一个数字。例如：
```
:root {
  --num: 10;
}

@for $val from 1 to var(--num) {
  // ...
}
```
使用 JavaScript 获取 CSS 变量值： 如果需要动态获取 CSS 变量的值，可以使用 JavaScript 代码获取，并将其传递给 Sass 变量。例如：
```
const num = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--num'));
```
然后将 num 变量传递给 Sass 变量：
```
$num: #{num};

@for $val from 1 to $num {
  // ...
}
```

使用循环方法替代 @for 指令： 如果循环次数不确定，可以使用 JavaScript 代码生成循环代码，避免使用 @for 指令。例如：

const num = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--num'));
let html = '';
for (let i = 1; i <= num; i++) {
  html += `
    // ...
  `;
}
document.getElementById('container').innerHTML = html;

总结：

SassError: var(--num) is not a number 错误通常是由于 var(--num) 没有被定义为一个数字导致的。通过以上解决方案，可以有效解决这个问题，并确保 Sass 代码正常运行。