How can I dynamically update a SCSS property based on a boolean value in Vue 3?

I'm using Vue 3 and SASS in my project. I have a boolean variable : closed and I would like to update a property in my SCSS when this boolean becomes true. In the provided example, I want to display a border-bottom in the .node class when closed is true, and hide it when closed is false.

Is it possible to achieve this directly in SCSS, or do I need to use JavaScript to control this behavior? I've searched on inte for a solution but haven't been able to find a clear answer.

Any help or guidance would be greatly appreciated. Thank you!

<template>
  <div>
    <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 {
  // ...

  //What I would like to do :
  if (closed) {
  border-bottom: 2px solid $border-color;
  }

 

}
</style>

With pure CSS you could use v-bind, doesn't work with SCSS though:

border-bottom: v-bind(closed ? '3px solid red' : 'inherit');

In your template you can add a component class name and dynamic attribute (eg isclosed) for closed value:

<template>
<div class="mycomponent" :isclosed="closed" >
<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>

Then in your SCSS you can setup any style in component nodes in this way:

.mycomponent[isclosed='true']{
/* component style when closed == true */
.header{
/* header style when component closed == true */
}
}