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来做到这一点，但我只是有点懒惰和好奇：）

感谢您的回答，

一个。

Answer 1

您可以在所有宽度类中声明--width变量，并在margin 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>

Answer 2

我认为你可以这样做

.mr-10 {
    width: calc((100% / 4) * 3 - 25px);
}

25px值可以变化

CSS：自动宽度变量计算

2 个答案: