CSS : 自动宽度变量计算

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

您可以在所有宽度类中声明 [=12th=] 变量并在边距 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 : 自动宽度变量计算

CSS : Automatic width variable calculation

html

css

helper