Modify CSS variable in media query

Question

Is there a way to modify a previously-declared CSS variable inside a media query with just vanilla CSS? What I'm after would look like this (which of course doesn't work as the variables all get computed in the end):

#container {
  --elem-size: 20px;
}

@media only screen and (min-width: 800px) {
  #container {
    --elem-size: calc(var(--elem-size) * 2);
  }
}

I'm aware that it would be possible to declare a "base variable" (e.g. --base-elem-size) and then use it to generate new variable values for different viewports. However, I'm working with a very large number of CSS variables which makes it undesirable to create a duplicate base set out of them. The ideal solution would be able to "modify" a previously-declared value.

Answer 1

I think having base CSS variables would make your CSS much more readable and easier to maintain, specially if you are working with a big codebase.

May be something like this:

:root {
  /* Define you base variables */
  --font-size-default: 16px;
  --font-size--large: calc(var(--font-size-default) * 1.25);
  /* Assign the base variable to the element variables */
  --elem-size: var(--font-size-default);
}

@media screen and (min-width: 840px) {
   :root {
    /* Change base variable used for element variable */
    --elem-size: var(--font-size--large);
  }
}

This allows you to set a base font-size variable and one (or more) "variants" of that variable, which you can then use on your whole project

I would suggest you look into something like the Open Props (which has some really great ideas for what base variables can be and how to use them)

Answer 2

This is currently (2025-01) not possible.

A CSS variable cannot reference itself in setting its own value.

The following example does not produce a font size of 2rem at viewports of > 768 px.

:root {
  --font-size-custom: 1rem;
}

@media (min-width: 768px) {
  :root {
    --font-size-custom: calc(var(--font-size-custom) * 2);
  }
}

body {
  font-size: var(--font-size-custom);
}