SCSS の JavaScript で変数を使用する方法

JS の例:

• JavaScript で名前が付けられた変数が宣言され theme 、文字列値が割り当てられます。

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

HTML の例:

• 次に、属性はVue コンポーネントのテンプレート内の 要素<div> で使用され :style 、 --theme カスタム属性は theme オブジェクト構文を介して変数にバインドされます :style="{'--theme': theme}"。これにより、 theme の値がコンポーネントのスタイルに渡されます。

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

scss での変数の使用:

• コンポーネントのスタイルでは、  カスタム プロパティの値var(--theme) を参照するために 使用できます。--themeたとえば、 SCSS スタイルの background プロパティを 使用して#{'var(--theme)'} 、 --theme 次のような補間構文を通じてカスタム プロパティの値をグラデーションの背景に動的に挿入できます。 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>