使用百分比作为CSS calc()的乘数
假设我定义了一个CSS变量使用百分比作为CSS calc()的乘数,css,css-variables,css-calc,Css,Css Variables,Css Calc,假设我定义了一个CSS变量--half等于50% :根目录{ --一半:50%; } 然后我可以将某物的宽度设置为50%,如下所示: .partial{ 宽度:var(--一半); } 到目前为止还不错。假设我有一个高的元素,我想垂直填充视口: .toll{ 高度:100vh; } 太好了。最后,如果使用了partial,我希望我的toll元素只填充垂直空间的一半(即50vh)。所以我试了一下: .toll.partial{ 高度:计算(100vh*var(-一半)); } 哎呀,这似乎
--half
等于50%
:根目录{
--一半:50%;
}
然后我可以将某物的宽度设置为50%
,如下所示:
.partial{
宽度:var(--一半);
}
到目前为止还不错。假设我有一个高的
元素,我想垂直填充视口:
.toll{
高度:100vh;
}
太好了。最后,如果使用了partial
,我希望我的toll
元素只填充垂直空间的一半(即50vh
)。所以我试了一下:
.toll.partial{
高度:计算(100vh*var(-一半));
}
哎呀,这似乎不起作用。如果我将--half
重新定义为等于0.50
,它确实有效:
:根目录{
--半数:0.50;
}
但是,我上面的width
设置无法单独使用变量
问题A部分:如何在CSScalc()
表达式中使用XX%
名称,并将其解释为作为乘法因子的百分比值
问题B部分:如果无法做到这一点,是否有一种方法可以根据实际值定义百分比值,或者反过来定义百分比值,例如以下虚构的定义?(我不希望定义重复的“镜像”值,一个是百分比值,一个是小数点值。)
:根目录{
--半因子:0.50;
--一半:计算(var(半因子)*100)%;
}
如果我被迫定义两个单独的变量(问题的B部分),那么我似乎可以这样做:
:根目录{
--半因子:0.50;
--一半:计算值(100%*var(半因子));
}
因此,这将使我的应用程序正常工作,并使值最终取决于一个值定义(此处为--半因子
)。但是如果有一种方法可以用一个定义来完成两个用例,我很想知道它。(我知道我可以内联calc(100%*var(半因子))
而不是使用var(--half)
,但这不是我所说的“单一定义”的意思。将单位视为一个变量,你可以像下面这样做:
:根目录{
--季度:25 ;;
--半数:50 ;;
--四分之三:75;
}
* {
--R季度:计算(var(--quarter)*var(--u,1%);
--半R:calc(var(--half)*var(--u,1%);
--三季度-R:计算(var(-三季度)*var(-u,1%);
}
.盒子{
高度:50px;
背景:红色;
保证金:5px;
宽度:var(--half-R);
}
是的,这也是我能想到的最好的办法:;虽然我自己的方法是基于多个变量一起使用来确定最终的尺寸),但乘以宽度百分比是没有意义的。结果单位是多少?50vh%?您考虑的是CSS百分比单位。我想乘以百分比值,它是无单位的;也就是说,50%等于0.50%。它们是相同值的不同表示形式。所以也许这就是问题所在;CSS将百分比视为一种单位类型,我尝试在表达式中已经有单位的情况下使用无量纲值。