Question

我想把一个80％的div作为另一个div的宽度，但它们既不是嵌套也不是兄弟。

如何使用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

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

1 个答案: