Scss @mixin函数

Question

我希望div的高度是宽度的38％，宽度应该是100％，所以我想做的是这样的：

@mixin div-dimensions ($width) {
    width: $width;
    height: $width * 38;
}

（应用它）

@include div-dimensions (100%)

希望当用户调整窗口大小时，div的比例仍然存在。但当然上面的方法不起作用，高度的值现在是div的比例，而不是宽度，任何建议？非常感谢！

Answer 1

计算是编译时，但您需要运行时依赖。

您可以使用以下方法：

.wrapper {
  padding-top: 38%;
  position: relative;
}

.content {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: silver;
}

Just some text
<div class="wrapper">
  <div class="content">
    Height is 38% of width
  </div>
</div>
Some other text