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

Patricia Arquette
リリース: 2024-11-14 12:25:02
オリジナル
128 人が閲覧しました

How Can I Use Unitless CSS Variables with Different Units?

How to Use Unitless CSS Variables with Flexibility

Unitless CSS variables provide the ability to store numeric values that can be conveniently used throughout a stylesheet. However, there may arise scenarios where you desire to use the same variable in different contexts, requiring varying units such as percentages or pixels.

An example of this dilemma would be setting a CSS variable with the value of 10 but needing to use it as a percentage in one instance and as a plain number for calculations in another.

The solution lies in utilizing the calc() function. By performing a simple multiplication of the variable with the desired unit within the calc() function, we can achieve the required flexibility.

For instance, to convert the variable --mywidth with a value of 10 into a percentage, simply use:

div{width:calc(var(--mywidth) * 1%);}
ログイン後にコピー

This will result in the width property being set to 10%, exactly as intended.

The versatility of this approach extends to various units, allowing you to seamlessly switch between percentages, pixels, or any other unit of measurement required within the same stylesheet.

To illustrate this, consider the following code snippet:

: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;
}
ログイン後にコピー

In this example, the variable --a is used to define various properties, including the width, border, background, and padding. By utilizing units within the calc() function, each property can be adjusted dynamically based on the value stored in --a.

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート