Question

如果我有这样的安装程序类：

.MyClass {
  margin: 5px;
}

但是然后我想利用calc来设置像这样的组件的宽度：

<button class="MyClass" style="width: calc(25% - 10px)"></button>
<button class="MyClass" style="width: calc(25% - 10px)"></button>
<button class="MyClass" style="width: calc(25% - 10px)"></button>
<button class="MyClass" style="width: calc(25% - 10px)"></button>

<button class="MyClass" style="width: calc(75% - 10px)"></button>
<button class="MyClass" style="width: calc(25% - 10px)"></button>

<button class="MyClass" style="width: calc(20% - 10px)"></button>
<button class="MyClass" style="width: calc(30% - 10px)"></button>
<button class="MyClass" style="width: calc(20% - 10px)"></button>
<button class="MyClass" style="width: calc(30% - 10px)"></button>

有没有办法使它更具动态性？这样我就可以在班级中编辑边距，然后无需在其他任何地方编辑10px（因为我有100多个按钮）。我希望有这样的东西：

calc(25% - margin)

Answer 1

学习和使用CSS变量bro！它非常简单而强大。这是很棒的视频教程：https://scrimba.com/g/gcssvariables

Answer 2

谢谢大家的回答。我相信这是目前最简单的解决方案：

:root {
    --margin: 5px;
    --marginDouble: var(--margin) * 2;
}

.MyClass {
  margin: 5px;
}

calc(25% - var(--marginDouble))

具有当前值的Css Calc

2 个答案: