less变量和vue变量同时作用于一个cssess变量和vue变量同时作用于一个cssess变量和vue变量同时作用于一

前提：可视化大屏需要给div一个样式为100 * @px，其中@px是在公共样式内写死的，此处不能写死为1rem所做的妥协。

<template>
  <div :style="{ width: computedWidth }">
    This div's width is controlled by Vue and Less.
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const width = ref(1); 

    const computedWidth = computed(() => {
      return `calc(${width.value} * var(--px))`;
    });

    return { computedWidth };
  }
};
</script>

<style lang="less">
@px: 1rem
.dynamic-width {
  --px: @px;
  width: var(--px); /* 默认 */
}
</style>