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?

You can't do that. You need to define css var first. Or better use it in a class because there seems to be no necessity for background-color to belong to style — Estus Flask, Apr 13 '23 at 14:42
You can't use your sass variables in inline style, according to this answer: https://stackoverflow.com/a/65462299/13023290 — Leon, Apr 15 '23 at 05:19

score 0 · Accepted Answer · answered Apr 15 '23 at 10:19

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>

Dynamic inline style on vue by sass variables

1 Answers1