CSS 変数は異なるユニットで動的に使用できますか?

動的単位を使用した単位のない CSS 変数

パーセントベースの値と単位のない値の両方を使用する場合、CSS 変数の操作で問題が発生することがよくあります。この質問では、単位のない CSS 変数を割り当て、それをさまざまな単位と互換的に使用する方法について説明します。

質問:

CSS 変数には数値を設定できますか?ある場合にはパーセンテージとして使用され、別の場合には単純な数値として使用されますか?例:

--mywidth:10;

div{width:var(--mywidth) + %;}  --- should be ---> width:10%

答え:

はい、calc() 関数を使用してこれを実現できます。変数に適切な単位を掛けることで、任意の単位に動的に変換できます。

変数 --mywidth をパーセンテージとして使用するには、1% を掛けることができます:

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

例:

次のコードは、calc() 関数の使用法を示しています。単位のない CSS 変数に動的に単位を追加します:

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

以上がCSS 変数は異なるユニットで動的に使用できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。