如何在CSS变量中完成数值计算并拼接对应单位？

核心使用CSS原生的calc()函数完成数值运算，单位直接嵌入calc()表达式内即可，不需要单独拼接。

情况1：--size为纯数值（无单位，和你示例写法一致） #

你示例中的--size: 100属于纯数值变量，运算时将数值和对应单位相乘即可自动带上单位：

.myElement {
  --size: 100;

  /* 除以2，单位为px */
  padding: calc(var(--size) / 2 * 1px);
  /* 乘以2，单位为% */
  margin: calc(var(--size) * 2 * 1%);
  /* 直接转px单位 */
  width: calc(var(--size) * 1px);
}

原理很简单：1px是单个像素单位，和纯数值相乘后会直接生成带px单位的结果，1%、1rem、1vw等其他单位都可以用同样的方式处理。

情况2：--size本身带单位 #

如果你的--size定义时已经带了单位，比如--size: 100px，运算时不需要额外处理单位，直接写运算逻辑即可：

.myElement {
  --size: 100px;

  /* 运算结果自动继承px单位，得到50px */
  padding: calc(var(--size) / 2);
  /* 运算结果得到200px */
  margin: calc(var(--size) * 2);
}

注意事项 #

• calc()表达式内的运算符左右必须加空格，否则会触发语法错误，比如calc(var(--size)/2)是非法写法，必须写成calc(var(--size) / 2)
• 不同单位可以在calc()内混合运算，比如calc(var(--size) * 1px + 5rem)是合法语法

内容的提问来源于stack exchange，提问作者dannyxnda