vue2在scss中使用js的变量

在 Vue 2 中，你可以通过以下步骤在 SCSS 中使用 JavaScript 变量：

1. 在 data 函数中定义你的 JavaScript 变量。
2. 使用 v-bind:style 或简写 :style 将这个变量绑定到元素的 style 属性。
3. 在 SCSS 中通过 #{} 将 JavaScript 变量嵌入。

示例代码：

<template>
  <div :style="{ backgroundColor: dynamicColor }">
    <!-- 你的内容 -->
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      dynamicColor: '#3498db' // 这是一个JavaScript变量
    }
  }
}
</script>
 
<style lang="scss">
// SCSS中使用JavaScript变量
div {
  color: #{dynamicColor}; // 这里会输出 '#3498db'
}
</style>

在上面的例子中，我们在 data 中定义了一个 dynamicColor 变量，然后通过 :style 将其绑定到了 div 的 style 属性的 backgroundColor。在 style 标签内，我们使用了 SCSS 的 #{} 语法将 dynamicColor 变量嵌入到 CSS 属性中。这样，你就可以在 SCSS 中使用 JavaScript 变量了。