Vue で CSS カスタム変数を使用する方法

<スタイル>
div {
    --bg-color : pink; //変数を定義 color : var( --bg-color ) //var関数を通じて変数を使用する}
</スタイル>
<div>こんにちは</div>

<スタイル>
div {
    --bg-color : pink; //変数を定義する color : var( --bg-color ); //var関数を通じて変数を使用する}
div:ホバー{
    背景色: var( --bg-color );
}
div スパン {
    背景色: var( --bg-color );
}
</スタイル>
<div>こんにちは <span>世界</span> </div>

<スタイル>
div {
    color : var( --bg-color, pink ); // 2 番目のパラメータはデフォルト値です background-color : var( --bg-color ,--color,--a,red ); // 複数の変数を設定することもできます。左から右に検索されます }
</スタイル>
<div>こんにちは</div>

<テンプレート>
	<div class="box" @click="changeColor" :style="{'--a' : a}">こんにちは</div>
</テンプレート>
エクスポートデフォルト{
  データ（）{
    戻る {
      a : 「青」、
    }
  },
  メソッド: {
    色を変更する(){
      this.a = this.a === 'blue' ? "red" : "blue"
    }
  }
}
</スクリプト>
<スタイル>
  。箱 {
      色: var(--a);
  }
  .box:hover {
    背景色: var(--a);
  }
</スタイル>

// 親コンポーネント <テンプレート>
	<div class="box" :style="{'--a' : a}">こんにちは <Child></Child></div>
</テンプレート>
エクスポートデフォルト{
  コンポーネント: {
      子供
  },
  データ（）{
    戻る {
      a : 「青」、
    }
  }
}
</スクリプト>

//子コンポーネント
<テンプレート>
  <span>世界</span>
</テンプレート>

<スタイル lang="less">
  スパン {
      色: var(--color);
  }
</スタイル>

   // vue3 カスタムディレクティブ。
      関数 change(el,binding){
        for(let [key,value] of Object.entries(binding.value)){
            el.style.setProperty('--'+キー、値);
        }
    }
  app.directive(css, {
        マウント(el,binding){
            変更(el,バインディング)
        }
        更新(el, バインディング) {
            変更(el,バインディング)
        }
       
    })

<テンプレート>
	<div v-css="{a,b}" クラス="box" @click="changeColor"></div>
</テンプレート>
エクスポートデフォルト{
  データ（）{
    戻る {
      a : 「青」、
      b : 「ピンク」
    }
  },
  メソッド: {
    色を変更する(){
      this.a = this.a === 'blue' ? "red" : "blue"
      this.b = this.b === 'ピンク' ? "黄色" : "ピンク"
    }
  }
}
</スクリプト>
<スタイル>
  。箱 {
    幅: 100px;
    高さ: 100px;
    背景色: var(--a);
  }
  .box:hover {
    背景色: var(--b);
  }
</スタイル>