単位のない 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;
}

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

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