単位のない CSS 変数に単位を適用するにはどうすればよいですか?

必要な単位を使用して単位のない CSS 変数をカスタマイズする

CSS では、単位のない変数を定義できるため、スタイルの柔軟性が向上します。ただし、幅のパーセンテージや calc() 演算のピクセルなど、変数を複数の場所で異なる単位で使用する必要がある状況がよくあります。

calc() と単位の乗算の紹介

これを解決するには、calc() 関数を使用して変数に目的の単位を明示的に追加します。変数に適切な単位係数 (例: 1%) を乗算することで、目的の動作を実現できます。

例:

CSS が変数 --mywidth は 10 に設定されています。幅のパーセンテージとして使用するには、次のようにします。 write:

div {
  width: calc(var(--mywidth) * 1%);
}

この計算では、--mywidth に 1% (0.01) を効果的に乗算し、幅の値は 10% になります。

拡張使用例:

パーセンテージ以外にも、このテクニックを使用して任意の値を追加できます単位:

• ピクセルの場合: calc(var(--mywidth) * 1px)
• 度の場合: calc(var(--mywidth) * 1deg)
• 不透明度の場合: calc(var(--mywidth) * 0.1)

デモ:

次のスニペットは、この手法の適用を示しています:

:root {
  --a: 50;
}

.box {
  width:calc(var(--a) * 1%);
  border:calc(var(--a) * 0.5px) solid red;
  background:linear-gradient(calc(var(--a) * 0.8deg), blue 50%, green 0);
  padding:20px;
  box-sizing:border-box;
}

この例では、ボックス要素では、幅のパーセンテージ、境界線のピクセル、線形グラデーション角度の度、ピクセルなど、さまざまな単位で --a を使用する方法を示します。パディング用。

以上が単位のない CSS 変数に単位を適用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。