css - 如何根据另一个不相关的元素定义一个元素的宽度？

Question

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

我怎样才能用 SASS 做到这一点

Answer 1

您可以为原始宽度使用一个变量，并将其用于计算宽度。我使用 mixin 展示了一个宽度以像素和百分比表示的演示。

HTML

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

SCSS

@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;
  }

Updated Codepen