Is it possible to write if conditions in SCSS with v-bind in 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>
I know i can do this with class, but I’m curios if this is possible and how it’s done