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

CSS カスタム変数機能は古くから存在していますが、実際の開発ではあまり使用されていません。その理由は、lessやsassなどのプリプロセッサにはすでに変数を定義する機能があり、Vueやreactはスタイルを設定するのに非常に便利だからです。cssを使用して変数を定義するのは不便で不必要だと思う人もいるかもしれません。実際はそうではありません。最も直感的な例、「Vue を使用して疑似クラスの疑似要素のスタイルを設定する方法」を見てみましょう。これは 1 世紀も前からある問題です。ほとんどの人はクラス名を変更することで解決できるかもしれませんが、変更するスタイルが多数ある場合や、異なるデータで異なるスタイルをレンダリングしたい場合はどうすればよいでしょうか。今日はこの問題について直接お話ししたいと思います。まず、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>

var 関数はデフォルト値を設定することもできます。カスタム変数が見つからない場合にもデフォルト値を設定できます。

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

これで CSS カスタム変数の紹介は終了です。次に、Vue での使用法を見てみましょう。タグのスタイル属性で変数の値を設定できます。

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

div をクリックすると、マウスを置いたときのフォントの色と背景色が変わります。この時点で、CSS 変数をカスタマイズすることで、スタイルを簡単に変更し、疑似クラスのプロパティを直接変更できることがわかります。子要素は親のカスタム変数を共有できるため、親独自の変数を子コンポーネントで直接使用できます。

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

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

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

試してみると、その効果は驚くべきものです。このようにして、子コンポーネントと親コンポーネント間の値の転送をバイパスして、親コンポーネントの状態を変更して子コンポーネントのスタイルを変更することができます。注意: サブコンポーネントは、変数を使用できるスコープクラスにマウントする必要があります。

上記の例から、サブ定義変数の便利さがわかります。使いやすさのために、vue カスタム命令を通じて変数を設定できます。

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

el.style['--color'] = 'red' を使用して CSS 変数を変更することは無効であり、style.setProperty API を使用して設定する必要があることに注意してください。指示を登録したら可能です。

<テンプレート>
	<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);
  }
</スタイル>

これにより、Vue のスタイル操作が大幅に容易になります。

これを基に、いくつかの最適化と拡張を行い、ツールを公開し、npm で公開しました。アドレスは www.npmjs.com/package/vue… です。ぜひダウンロードして体験してください。気に入ったら、スターを付けてください。

上記は、Vue が CSS カスタム変数を使用する方法の詳細です。Vue が CSS カスタム変数を使用する方法の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません: