scss中的类名如何使用vue变量？

Question

下边这种写法如果写到样式的属性或者值上可以生效，但是写到类名上就报错，scss中的类名怎么使用vue变量呢？

// HTML代码
<div class="common-ul-li3 ub-f5 ub">
    <div class="common-ul-li3-dot ub-f1" :style="{'--num': 45}"></div>
</div>

.common-ul-li3-dot {
    $dotNum: var(--num);
    &:nth-child(-n + #{$dotNum}) {
      background: green;
    }
  }

Answer 1

#{$dotNum}