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

単位のない CSS 変数を柔軟に使用する方法

単位のない CSS 変数は、スタイルシート全体で便利に使用できる数値を保存する機能を提供します。 。ただし、同じ変数を異なるコンテキストで使用し、パーセンテージやピクセルなどのさまざまな単位が必要になるシナリオが発生する可能性があります。

このジレンマの例としては、CSS 変数に値 10 を設定しますが、あるインスタンスではパーセンテージとして使用し、別のインスタンスでは計算用の単純な数値として使用する必要があります。

解決策は、calc() 関数を利用することにあります。 calc() 関数内で変数と目的の単位の単純な乗算を実行することで、必要な柔軟性を実現できます。

たとえば、値 10 の変数 --mywidth をパーセンテージに変換するには、

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

これにより、意図したとおり、width プロパティが 10% に設定されます。

このアプローチの汎用性はさまざまな単位に拡張され、同じスタイルシート内でパーセンテージ、ピクセル、またはその他の必要な測定単位をシームレスに切り替えることができます。

これを説明するために、次のコード スニペットを考えてみましょう。

: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 を使用して、幅、境界線、背景、パディングなどのさまざまなプロパティを定義します。 calc() 関数内の単位を利用することで、--a.

に保存された値に基づいて各プロパティを動的に調整できます。

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