CSS：自动宽度变量计算答案

【问题标题】：CSS : Automatic width variable calculationCSS：自动宽度变量计算
【发布时间】：2017-08-08 08:39:55
【问题描述】：

大家好！

假设我有 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 有很多方法可以做到这一点，但我只是有点懒惰和好奇 :)

感谢您的回答，

一个。

【问题讨论】：

标签： html css helper

【解决方案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>

【讨论】：

好吧！所以我们必须声明变量，例如没有"this element width" - 10px？但这离我要找的很近，非常感谢:)
>width: calc(var(--width) - 10px);: 当--width: calc(100% / 2); 设置在某些祖先元素中时，它是如何工作的？ 100% / 2 是如何计算的？

【解决方案2】：

我认为你可以这样做

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

25px 值可以变化

【讨论】：

是的，但是这个解决方案的问题是我不能重用 sn-p。我有多个助手类，例如.w1-4、.w2-4 等。我正在寻找一个 DRY 解决方案，但使用纯 css :)
好的，那么您需要修复它或使用任何服务器端语言来实现此目的。服务器端语言可以是 PHP 或您正在使用的任何语言
我明白了，CSS 目前还没有实现这个工具。实际上，上面@supraja 的答案与我正在寻找的内容很接近，在纯 CSS 中。仍然是多余的行，但我想 CSS 中还没有等效的“this.width”
是的，对 :-) 你可以接受任何答案，不用担心。