パーセンテージと計算の両方に単位のない CSS 変数を使用するにはどうすればよいですか?

単位のない CSS 変数: 単位変換の処理

CSS 変数を使用する場合、柔軟性とプレゼンテーションの制御を維持するために単位のない値を使用することが望ましいことがよくあります。ただし、CSS プロパティでは、さまざまな状況で特定の単位が必要になります。このガイドでは、単位のない変数を使用し、それらを必要な単位にシームレスに変換する手法を説明します。

シナリオ:

変数 --mywidth を定義する必要があります。数値。ただし、CSS 内では、この変数を要素の幅のパーセンテージと calc() 操作の単純な数値の両方として利用したいと考えています。

解決策:

calc() と単位の乗算:

これを実現するには、calc() 関数を使用します。必要な単位で単純な乗算を実行します。例:

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

このアプローチでは、width プロパティの要件に従って、単位のない変数 --mywidth をパーセント値に再スケーリングします。同様に、変数を計算の数値として使用するには、それに応じて乗数を調整します:

calc(var(--mywidth) * 1px)

例:

次のコードを考えてみましょう:

: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;
}

<div class="box"></div>

この例では、 --a 変数は単位なしで始まります。 .box クラス内では、calc() を使用して、必要に応じてパーセント、ピクセル、および度に変換します。結果として、指定した寸法、境界線の幅、グラデーション角度、およびパディングを備えたボックスが作成されます。

この手法を使用すると、単位のない値を使用して CSS 変数を定義し、その後それらを適切な単位に変換できるため、柔軟性と効率が向上します。 CSS スタイルに含めます。

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