在 CSS 个变量中计算和串联

Question

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

  .myElement {
    --size: 100;

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

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

Answer 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>

在 CSS 个变量中计算和串联

Calculate and Concatenate in CSS variables

css

css-variables