如何使用无单位CSS变量并在以后添加所需的单位? [英] How to use a unitless CSS variables and later add the needed unit?

问题描述

我试图用一个数字设置一个CSS变量，然后我想在我的CSS中以百分比的形式使用它，而在其他地方，我将需要使用它作为一些 calc()<的纯数字/code>操作.

I am trying to set a CSS variable with a number then I want to use it in my CSS as a percentage, while in other places I will need to use it as a plain number for some calc() operations.

示例

--mywidth:10;

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

有可能吗?

推荐答案

使用 calc()并与任何单位进行简单的乘法:

Use calc() and do a simple multiplication with any unit:

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

示例:

: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变量并在以后添加所需的单位?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！