这个5 是个变量的话怎么办

如果需要在 SCSS 中根据 JS 变量的值进行循环，可以使用 `math` 函数库和 `calc` 函数来实现。

首先，在 Vue 中定义一个变量：

data() {
  return {
    length: 5
  }
}

然后，在模板中通过计算属性生成样式：

<template>
  <div :class="`box-${index+1}`" v-for="(item, index) in length" :key="index"></div>
</template>

<script>
export default {
  data() {
    return {
      length: 5
    }
  }
}
</script>

<style lang="scss">
@import "math";

@for $i from 1 through calc(#{$length} + 1) {
  .box-#{$i} {
    width: 50px * $i;
    height: 50px * $i;
    background-color: #f00;
  }
}
</style>

在这个例子中，通过 `v-for` 循环渲染了 `length` 个 `div`，然后在 SCSS 中使用 `@for` 循环生成了 `length` 个不同大小的 `.box-*` 类名样式。

在 `@for` 循环中使用了 `calc()` 函数和 `math` 函数库将 JS 中的变量转换为 CSS 中的值。

这样就可以实现在 SCSS 中根据 JS 变量的值进行循环。