修改媒体查询中的 CSS 变量

Question

有没有办法只使用普通 CSS 来修改媒体查询中先前声明的 CSS 变量？我所追求的看起来像这样（这当然不起作用，因为变量最终都会被计算）：

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

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

我知道可以声明一个“基本变量”（例如 --base-elem-size），然后使用它为不同的视口生成新的变量值。然而，我正在使用大量的 CSS 变量，这使得从它们中创建重复的基本集是不可取的。理想的解决方案将能够“修改”先前声明的值。

Answer 1

我认为拥有基本 CSS 变量将使您的 CSS 更具可读性且更易于维护，特别是如果您正在使用大型代码库。

可能是这样的：

: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);
  }
}

这允许您设置一个基本字体大小变量和该变量的一个（或多个）“变体”，然后您可以在整个项目中使用它们

我建议你研究一下像Open Props这样的东西（它对于什么是基本变量以及如何使用它们有一些非常好的想法）