CSS：自动宽度变量计算

Question

大家好 ！

假设我有 2 个辅助类：

.w3-4 {
  width: calc((100% / 4) * 3);
}

// AND

.mr-10 {
  margin-right: 10px;
}

你认为有一种自动的纯CSS方法可以从.mr-10宽度中减去边距值吗.w3-4？

诸如此类的东西

.mr-10 {
  margin-right: 10px;

  // width calc
  width: calc(--width - 10px);
} 

有很多方法可以使用 SASS 甚至 JS 来做到这一点，但我只是有点懒惰和好奇:)

感谢您的回答，

A。

Answer 1

您可以--width在所有宽度类中声明变量并在边距CSS中操纵宽度

div {
  border: 1px solid;
  margin-bottom: 10px;
  text-align: center;
}
.w3-4 {
  width: calc((100% / 4) * 3);
  --width: calc((100% / 4) * 3);
}
.w1-2 {
  width: calc(100% / 2);
  --width: calc(100% / 2);
}
.w1-4 {
  width: calc(100% / 4);
  --width: calc(100% / 4);
}


.mr-10 {
  margin-right: 10px;
  width: calc(var(--width) - 10px);
}

<div class="w3-4">
width 3/4
</div>
<div class="w1-2">
width 1/2
</div>
<div class="w1-4">
width 1/4
</div>
<div class="w3-4 mr-10">
width 3/4 with 10px margin-right
</div>
<div class="w1-2 mr-10">
width 1/2 with 10px margin-right
</div>
<div class="w1-4 mr-10">
width 1/4 with 10px margin-right
</div>