Css 如何基于另一个不相关的元素定义一个元素的宽度？

我想使一个div的宽度达到另一个div的80%，但它们既不是嵌套的，也不是同级的

---

如何使用SASS实现这一点您可以将一个变量用于原始宽度，并将其用于计算宽度。我使用了一个mixin来展示一个演示，它的宽度以像素和百分比为单位

HTML

---

如果他的宽度以百分位数为单位，该怎么办？@knitevision用演示更新了答案。你必须用混音器来解决这个问题。哦，我的混音器似乎有点错误。我会更新答案

<div class="parent">
  <div class="three">three</div>
  <div class="four">four</div>
</div>
<div class="one">one</div>
<div class="two">two</div>

@mixin calc_width($obj) {
    width: calc(0.8 * #{$obj})  
}


$width_in_px: 300px;
$width_in_percentage: 50%;

.one{
  width: $width_in_px;
  height: 50px;
  background: red;
}
.two {
  @include calc_width($width_in_px); 
  height: 50px;
  background: green;
  }

.parent {
  width: $width_in_px;
  background: orange;
}
.three{
  width: $width_in_percentage;
  height: 50px;
  background: lime;
}
.four {
  @include calc_width($width_in_percentage);  
  height: 50px;
  background: black;
  }