Vue3 无法在 scss 中使用 typescript 变量答案

【问题标题】：Vue3 impossible to use typescript variable inside scssVue3 无法在 scss 中使用 typescript 变量
【发布时间】：2021-10-22 16:16:20
【问题描述】：

我有一个带有这样模板的组件：

<template>
  ...
    <ul class="circle-container">
      <li v-for="img in images" :key="img">
        <img :src="img" alt="..." />
      </li>
    </ul>
  ...
</template>

打字稿代码如下：

export default defineComponent({
  name: "Skills",
  setup() {
    const images = [
      ...
    ];

    const myCount = ref({
      nbItems: 8,
    });

    return { images, myCount };
  },
});
</script>

现在在我的 scss 代码中，我在其他地方定义了一个 mixin，这个 mixin 带有参数。我想将 myCount 作为第一个参数传递：

<style lang="scss" scoped>
@import "../scss/main.scss";

.circle-container {
  @include on-circle(
    $item-count: v-bind("myCount.nbItems"),
    $circle-size: 20em,
    $item-size: 6em
  );
  ...
}

...
</style>

当我这样做时，我收到以下错误：

语法错误：SassError: v-bind("myCount.nbItems") 不是数字。

但是，如果我将 v-bind 变量用于直接 css 属性，例如：

p {
  font-size: v-bind("myCount.nbItems")
}

它就像一个魅力......

我不明白为什么当我尝试将它用作 mixin 参数时它不起作用，有人可以帮忙吗？

【问题讨论】：

sass在编译的时候会生成css，也就是说它看不到任何运行时变量vue中的html是动态生成并打补丁到dom的。

标签： html typescript sass vuejs3

【解决方案1】：

我终于设法用另一种方法解决了我的问题。 mixin 旨在生成动态动画，使图像通过圆形路径运行，并且需要圆形直径（我希望它是动态的，以便在调整导航器页面大小时缩小圆形大小）。

我没有尝试将变量传递给 sass，而是使用了 Animation Web Api，它允许从 typescript 定义关键帧动画和动画 Html 元素。

【讨论】：