Vue3中如何根据布尔值动态更新SCSS属性？

我在Vue 3 + SASS项目中，有一个布尔变量closed，希望该变量为true时给.node类添加border-bottom样式，为false时隐藏该样式。请问能否直接通过SCSS实现此效果，还是需要借助JavaScript控制？以下是我的代码示例：

<template>
  <div class="node">
    <div class="header" @pointerdown.stop="" @dblclick.stop="" @click="toggleClosed">
      <!-- ... -->
    </div>
    
    <div class="expanded-content" v-show="!closed">
           <!-- ... -->
    </div>
    <div class="reduced-content" v-show="closed">
           <!-- ... -->
    </div>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";

/* ------------------------ Definition of node logic ------------------------ */
export default defineComponent({
  props: ["data", "emit"],

  setup() {
    const closed = ref(true);

    return {
      closed,
    };
  },

  methods: {
    
    async toggleClosed() {
      this.data.closed = !this.data.closed;
      this.closed = this.data.closed;
    },
  },
  computed: {
    nodeStyles() {
      return {
        width: Number.isFinite(this.data.width) ? `${this.data.width}px` : "",
        height: Number.isFinite(this.data.height) ? `${this.data.height}px` : "",
      };
    },
  },
});
</script>

<style lang="scss" scoped>
@use "sass:math";
@import "../../vars.sass";


.node {
  // ...

  // 我想要实现的逻辑：
  if (closed) {
  border-bottom: 2px solid $border-color;
  }
}
</style>

不能直接通过SCSS实现这个需求。SCSS是预编译样式语言，在项目构建阶段就已经编译成普通CSS，无法访问到Vue运行时的响应式变量closed，必须借助Vue的JS能力实现，以下是几种实用方案：

方案1：动态绑定CSS类（推荐） #

逻辑清晰，符合Vue最佳实践：

1. 在.node元素上添加动态类绑定：

<div class="node" :class="{ 'node-has-border': closed }">

2. 在SCSS中定义对应样式：

.node {
  // 原有基础样式...
}

.node-has-border {
  border-bottom: 2px solid $border-color;
}

方案2：内联样式绑定 #

适合样式逻辑简单的场景：

<div class="node" :style="{ borderBottom: closed ? '2px solid #你的边框色' : 'none' }">

提示：如果$border-color是SCSS变量，需要将其暴露到Vue的JS环境中（比如在样式文件导出变量后在组件内导入），或者直接写具体颜色值。

方案3：利用现有元素状态关联（局限性较大） #

如果不想额外添加动态类或内联样式，可借助页面已有v-show元素的状态，通过CSS选择器控制（依赖DOM结构和浏览器对:has伪类的支持）：

.node {
  // 原有基础样式...
}

// 当reduced-content显示时（即closed为true），给.node添加边框
.node:has(.reduced-content:not([style*="display: none"])) {
  border-bottom: 2px solid $border-color;
}

这种方式兼容性和灵活性较差，仅作为补充方案。

内容的提问来源于stack exchange，提问作者Gum