Cannot read property ‘numerator‘ of undefined，calc的运算

calc计算进度条时出现的错误

如下图的写法第一句的时候报错了，第二句的时候可以显示出需要的效果

calc里面的内容是计算出来的，precent2，precent分别是进度条的当前值和总值。

效果如下图

代码如下HTML

<div class="zhenProgress">
    <div class="bar"
     :style="`--precent2: ${item.grade};--precent: ${maxBusiness}`"></div>
 </div>

.zhenProgress {
        width: 200px;
        .bar {
          width: 90%;
          background-color: rgba(232, 237, 250, 0.9);
        }
        .bar::before {
          display: block;
          counter-reset: progress var(--precent2);
          content: counter(progress);
          //   width: calc(100% * var(--precent2) / var(--precent));
          width: ~"calc(100% * var(--precent2) / var(--precent))";
          color: #fff;
          background-color: rgba(0, 193, 255, 1);
          text-align: center;
          white-space: nowrap;
        }
      }

查找资料得知在less中计算操作不一样，资料来源calc的~

那么在这当中的区别就是需要calc之前加~，然后后面的代码用引号包起来就解决了。