How to use variables in JavaScript in SCSS

Example in JS:

• A variable named in JavaScript is declared  theme and assigned a string value

<script setup>
    const theme = '#f03d3d';
</script>

Example in HTML:

• <div> Next, attributes are used on  elements in the Vue component's template  :style , and  --theme custom attributes  theme are bound to variables via object syntax, eg  :style="{'--theme': theme}". This  theme passes the value of to the component's style.

<template>
    <div class="container" :style="{'--theme': theme}"></div>
</template>

Using variables in scss:

• In a component's style, you can use  var(--theme) to reference  --theme the value of a custom property. background For example, you can use properties  in SCSS styles  #{'var(--theme)'} to  --theme dynamically insert the value of a custom property into a gradient background through the interpolation syntax, such as background: linear-gradient(180deg, #{'var(--theme)'} 0%, rgba(48, 75, 204, 0) 95%);

<style lang="scss" scoped>
    //样例1
    .container {
      $theme: var(--theme);
      background: linear-gradient(180deg, #{$theme} 0%, rgba(48, 75, 204, 0) 95%);
    }

    //样例2
    .container {
      background: linear-gradient(180deg, #{'var(--theme)'} 0%, rgba(48, 75, 204, 0) 95%);
    }
</style>