CSS 変数に単位を動的に割り当てるにはどうすればよいですか?

CSS 変数への動的な単位の割り当て

CSS では、変数を利用する機能により、大幅な柔軟性と保守性が実現します。ただし、単位のない値を変数に割り当てると、変数をさまざまな目的で使用するときに問題が発生する可能性があります。この記事では、CSS 変数に数値を設定し、その後使用状況に基づいて単位を動的に割り当てる問題について説明します。

次の例を考えてみましょう。

--mywidth: 10;

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

目標は、- を使用することです。 -mywidth 変数は、特定の CSS プロパティのパーセンテージとして、および calc() 操作などの他のプロパティの数値として使用されます。

解決策は、calc() の機能を活用することにあります。変数と目的の単位の間で単純な乗算を実行することで、必要に応じて単位を動的に割り当てることができます。

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

このアプローチにより、変数の数値が保持されると同時に、特定の単位に基づいて単位を指定できるようになります。

たとえば、次の例を考えてみましょう:

:root {
  --a: 50;
}

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

この例では、 --a 変数が .box クラス全体で使用されており、単位は を使用して動的に割り当てられています。 calc().

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