¿Es posible escribir si las condiciones en SCSS con v-bind en Vue 3?

 <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>

Sé que puedo hacer esto con clase, pero tengo curiosidad por saber si esto es posible y cómo se hace.