html - CSS : Automatic width variable calculation

Question

嗨@all!

假设我有 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>