How to use css variables in a calc function

Question

I'm trying to use css variables in a css calc function but it doesn't render as expected.

My code

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>

Expected result:

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

Any help would be appreciated

Can you share your entire css file so we can see how you defined those variables and where? — tomerpacific
– tomerpacific, Commented Apr 21, 2020 at 7:29
^^^ Not the whole file perhaps, but just the part where you define the variables. — James Douglas
– James Douglas, Commented Apr 21, 2020 at 7:30
Here is an example with the variables that i use. codepen.io/67stefano/pen/vYNXMjE . You can see if you switch the font-size to the first definition that the font-size becomes responsive. — 67Stefano
– 67Stefano, Commented Apr 21, 2020 at 7:56
In your code, the one using css variable has (100vw - 320) and the other one has (100vw - 320px) — James Douglas
– James Douglas, Commented Apr 21, 2020 at 8:00

Temani Afif · Accepted Answer · 2020-04-21 11:32:39Z

There is nothing called unquote("px") in CSS, you need to multiply with 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>

Related: How do I debug CSS calc() value?

Collectives™ on Stack Overflow

How to use css variables in a calc function

1 Answer 1

Comments

Linked

Hot Network Questions