如何在calc函数中使用css变量

Question

我试图在css计算函数中使用css变量，但它没有按预期呈现。

我的代码

font-size: calc(var(--typography-headings-h1-minfontsize) + unquote("px") + (var(--typography-headings-h1-maxfontsize) - var(--typography-headings-h1-minfontsize)) * ((100vw - 320) / (1296 - 320)));

:root {
--primary-color: #0652dd;
--secondary-color: #ffffff;
--navbar-bg-color: #f1f1f1;
--typography-body-fontsize: 16px;
--typography-body-family: Merriweather;
--typography-body-weight: 400;
--typography-body-color: #000;
--typography-body-lineheight: 1.5;
--typography-headings-family: Fira Sans;
--typography-headings-weight: 400;
--typography-headings-color: #dd3333;
--typography-headings-style: normal;
--typography-headings-letterspacing: 0;
--typography-headings-texttransform: none;
--typography-headings-h1-minfontsize: 36;
--typography-headings-h1-maxfontsize: 60;
--typography-headings-h1-lineheight: 1.3;
}
h1 {
font-size: calc(14px + (26 - 14) * ((100vw - 320px) / (1296 - 320)));
font-size: calc(var(--typography-headings-h1-minfontsize) + unquote("px") + (var(--typography-headings-h1-maxfontsize) - var(--typography-headings-h1-minfontsize) ) * ((100vw - 320) / (1296 - 320))
);
}

<h1>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis, impedit.</h1>

预期结果：

font-size: calc(14px + (26 - 14) * ((100vw - 320px) / (1296 - 320)));

如有任何帮助，将不胜感激

Answer 1

CSS中没有unquote("px")，您需要与1px相乘

:root {
--primary-color: #0652dd;
--secondary-color: #ffffff;
--navbar-bg-color: #f1f1f1;
--typography-body-fontsize: 16px;
--typography-body-family: Merriweather;
--typography-body-weight: 400;
--typography-body-color: #000;
--typography-body-lineheight: 1.5;
--typography-headings-family: Fira Sans;
--typography-headings-weight: 400;
--typography-headings-color: #dd3333;
--typography-headings-style: normal;
--typography-headings-letterspacing: 0;
--typography-headings-texttransform: none;
--typography-headings-h1-minfontsize: 36;
--typography-headings-h1-maxfontsize: 60;
--typography-headings-h1-lineheight: 1.3;
}
h1 {
/*font-size: calc(14px + (26 - 14) * ((100vw - 320px) / (1296 - 320)));*/
font-size: 
calc(var(--typography-headings-h1-minfontsize)*1px + 
(
var(--typography-headings-h1-maxfontsize) - var(--typography-headings-h1-minfontsize)) 
* 
((100vw - 320px) / (1296 - 320)) /* don't forget the px unit for the first 320 */
);
}

<h1>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis, impedit.</h1>

相关：如何调试CSS calc((值？