tl：dr;不，在运行时无法更改Sass变量的值，因为它们在运行时已经不存在了。它们已经被转换为普通（静态）CSS。但是，就像任何CSS值一样，你可以覆盖它们。
Sass变量只用于在编译时将SCSS预处理为CSS。编译的结果是静态CSS，在应用安装时加载。简单地说，应用不知道CSS是从SCSS源代码预处理的。对它来说，它是静态CSS。
示例：

$primary-color: #f39200;
.my-button { color: $primary-color; }

将输出以下CSS代码：

.my-button { color: #f39200; }

如果需要运行时动态值，有两个选项：
1.使用CSS变量。
通过您喜欢的方法生成以下CSS（从SCSS/CSS/Stylus，无所谓，只要这是输出即可）：

.my-button { color: var(--primary-color); }

...并且，在父级链中的任何位置或元素本身上：

<div :style="{'--primary-color': someDynamicColor }" />

有了以上内容，当您在运行时更改someDynamicColor时，DOM中的color也会发生变化。
1.**使用Vue 3的"reactive styles"**功能：

<script>
export default {
  data: () => ({ someDynamicColor: 'red' })
}
</script>
<style>
  .my-button {
    color: v-bind('someDynamicColor');
  }
</style>

同样，这也是动态的。如果你改变了元素上someDynamicColor的值，CSS的值将应用到DOM中。它不一定是data属性，它可以是prop，computed，...

重要说明：

• 当使用CSS变量（1.）时，var(--primary-color)的值不必在同一个组件中设置，但必须在当前DOM元素的直接祖先上设置。
• 当使用React式样式（2.）时，必须在当前组件的作用域中设置CSS/SCSS中引用的prop/computed。
• 实际上，React式样式还使用CSS变量：它们在编译时是唯一命名的。
• CSS变量不使用特异性。如果您覆盖了父级上某个祖父级设置的值，则无论特异性如何，子级都无法阅读祖父级的值。如果遇到这种情况，您可能希望在外部状态中管理祖父级值，并将其提供给祖父级和子级。