CSS变量中的计算和连接[重复]

【问题标题】：Calculate and Concatenate in CSS variables [duplicate]CSS变量中的计算和连接[重复]
【发布时间】：2021-10-22 17:52:08
【问题描述】：

假设有一个--size 变量，我的目的是做这样的事情：

  .myElement {
    --size: 100;

    pading: var(--size / 2)px;
    margin: var(--size * 2)%;
    [anything]: var(--size) // calculate with --size and unit is px or % ...
  }

上面的代码只是假设的，我该如何实现呢？

【问题讨论】：

标签： css css-variables

【解决方案1】：

您可以在 CSS 属性中使用 calc() 来计算带有变量的像素和百分比测量单位。

:root {
  --size: 100;
}

.myElement {
  background-color: lightgreen;
  margin: calc(var(--size) * .2%);
  padding: calc(var(--size) / 2 * 1px);
}

.myElement>span {
  background: limegreen;
}

<div class="myElement">
  <span>text</span>
</div>

【讨论】：