vue3 v-bind传参给style scss中的变量，请教？

Question

 const itemChildLength = ref<string>('100px')

<style lang="scss" scoped>

$itemChild: v-bind(itemChildLength);     // 这里收不到？？没用处 ，我要接收一个 js转过来的变量要怎么做 ？

li::before{
  @if  $itemChild == '100px' {  // $itemChild  好象收不到传过来的值，不会执行下去
//  @if  v-bind(itemChildLength) == '100px' 这样写也不行
    display: block;
    content: '';
    width: v-bind(itemChildLength);
    height: 26px;
    border-left: 1px solid rgb(58, 180, 90);
  } @else {
    display: none;
  }
}

li::before {

    display: block;
    content: '';
    width: v-bind(itemChildLength);  // 写在这里是又是有效的。
    height: 26px;
    border-bottom:1px solid rgb(0, 255, 21);
  } 

Answer 1

if else 这是 sass 的规则，只会在加载编译成 css 的时候执行一次，不是响应式的。vue常见做法是定义两个 class，然后在 template 中或者 script 中根据 itemChildLength 来切换 class。