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