SCSS if 在 Vue 3 中使用 v-bind

Question

是否可以在 Vue 3 中使用 v-bind 在 SCSS 中编写 if 条件？

<script setup lang="ts"
  interface Props {
    hoverEnabled: boolean;
  }

  const { hoverEnabled = false } = defineProps<Props>();

</script>

  <div class="layout-block">
    <slot />
  </div>

<style lang="scss" scoped>
  .layout-block {
    background-color: red;
    transition: background-color 0.2s ease-in-out;

    //@if v-bind(hoverEnabled) == "true" - as i know v-bind returns string so tried this too
    @if v-bind(hoverEnabled) {
      &:hover {
        background-color: blue;
      }
    }
  }
</style>

我知道我可以在课堂上做到这一点，但我很好奇这是否可能以及如何完成