Vue単一コンポーネント内のjs・cssで変数を共有する

やりたいこと

おなじファイルの中に書いてるんだから、JavaScriptとCSSで変数、共有できたらいいのに。
サイズとか、色とか、状態とか。なんかできたほうが便利そう。

JavaScript -> CSS

JavaScriptで定義した変数をCSSで利用するのは、シンプルだった。
JavaScript側でrefを使って定義、CSS側でv-bindを使って呼び出し。

child.vue

<script setup>  const color = ref("#008900");</script><style scoped>  .canvas {    color: v-bind(color);  }</style>

CSS -> JavaScript

CSSで定義した変数（カスタムプロパティ）をJavascriptで使う。
Jsからカスタムプロパティを定義したDOMのプロパティを取得する。

child.vue

<template>  <div v-for="i of canvasCount" class="box" :key="i"></div></template><script>export default {  data() {    return {      canvasCount: 1    }  },  mounted() {    let c = getComputedStyle(document.querySelector('.box')).getPropertyValue('--box-count')    this.canvasCount = c  }}</script><style lang="scss" scoped>.box {  $canvas-count: 6;  --canvas-count: #{$canvas-count};}</style>

Sassのfunctionに変数としてはつかえない

Sassの関数（function）に使う条件としては変数は使えない。
例えば↓

child.vue

<script setup>  const count = ref(3);</script><style lang="scss" scoped>$count: v-bind(count);@for $i from 1 through #{$count} {  ul:nth-child(3n + #{$i}) {    background-color: lighten($base-color, $i * 5%);  }}

これは、

child.vue

@for $i from 1 through var(--componentIDっぽいやつ-count（具体例：--48de8c64-count）) {

}

と展開されて、コンパイルエラーになる。