CSS 変数のフロントエンド基礎#
使い方のデモ
まず、正方形を作成します
幅と高さが同じで、コードが繰り返されていることに注意してください
繰り返されるコードはメンテナンス上の問題を引き起こす可能性があります。このコードは少ないので、問題はないと思いますが、コードが多くなるとメンテナンスが非常に困難になります
CSS 変数はどのように書かれますか？ -- 変数名：値
例えば：
--size: 300px;
後で呼び出す場合
width: var(--size)
正方形の幅と高さを変更したい場合は、--size の値を変更するだけです
変数は CSS プロパティと同様に継承することができるため、ウェブページ全体で使用する変数がある場合は、html またはに書くことができます
変数なので、計算にも参加できます
見やすくするために、もう 1 つの子 div を作成します
box の padding を幅の 20% にしたい場合は、次のように書くことができます
padding:calc(var(--size) * 0.2)
子要素の幅と高さを親要素の半分にする
親要素を 100px に変更
問題ありません
グローバルテーマの作成に使用する
テーマの色は同じですが、透明度が異なります
テーマの色の透明度を変更するために、rgb の 3 つの値を変数として使用し、下部で透明度を調整するために rgba を使用します。プレビューしたい場合は、コメントを使用できます
複数の要素のアニメーションが同じで、サイズが異なるため、オフセットも異なる場合、複数のアニメーションを書く必要があります
各要素に CSS 変数を設定し、アニメーション内で呼び出すだけです
<div class="box" style="--dotsize: 10px"></div>
<div class="box" style="--dotsize: 5px"></div>
transform:translate(calc(var(--dotsize) * 3),calc(var(--dotsize) - 3))
以上です。他の使い方は自分で探求してください。皆さんが CSS をマスターするのをお祈りしています。