Dynamic inline style on vue by sass variables

Question

Here I have code of one block into mySlide

<div :style="{
               'background-image': `url('~@/assets/img/${slide[2].src}')`,
               'background-color': '$tertiary-light-gray',
             }"
     class="carouselSlide__line__block imageBlock">
</div>

I should do set background-image and upper that semi-opacity background-color

How I should done this?

Answer 1

Using SCSS inside a style attribute does not work. You can use v-bind in your css to set your values.

<div class="carouselSlide__line__block imageBlock"></div>

<script setup>
const image = computed(() => `url('~@/assets/img/${slide[2].src}')`);
</script>

<style scoped lang="scss">
.imageBlock {
  background-image: v-bind(image);
  background-color: $tertiary-light-gray;
}
</style>