Css 是否可以使用sass函数在媒体查询中从父宽度动态获取子高度？

我想使用sass函数动态设置不同屏幕大小的子项高度，而不是手动写入。我知道我们可以使用css

position:absolute
**我们可以给出宽度作为百分比值，但如果不给出
位置：绝对值，则无法得到高度当给出百分比值时

检查我的笔：

检查下面的代码，这里我在每个屏幕大小上手动写入项目值

输出

.container {
  background-color: red;
  margin: auto;
  text-align: center;
  color: #fff;
  font-size: 0;
}

.child {
  display: inline-block;
  border-right: solid 1px #fff;
  background-color: green;
}

/* container width and child width & height is set by manually on each screen size*/
/*max to 767px*/
.container {
  width: 100%;
}

.child {
  width: 25%;
  height: 25%;
}

@media (min-width: 768px) {
  .container {
    width: 600px;
  }

  .child {
    height: 150px;
    width: 150px;
  }
}
@media (min-width: 980px) {
  .container {
    width: 800px;
  }

  .child {
    height: 200px;
    width: 200px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1000px;
  }

  .child {
    height: 250px;
    width: 250px;
  }
}

如何使用sass函数编写这些代码？是否可以请大家分享想法。
要自动导出媒体查询，您可以使用以下功能

$viewports: ( 100%, 600px, 800px, 1000px);

@each $viewport in $viewports {
  @media (min-width: #{$viewport}) {
    .container {
      width: $viewport;
    }

    .child {
      height: $viewport/4;
      width: $viewport/4;
    }
  }
}

例如：
实际上，您不需要总是更改每个断点的.child。一旦设置了宽度：25%就足够了。只需更改容器（您甚至可以使用宽度：768px后为80%），那么如何获取子项高度？没有函数可以使用Sass获取任何元素的高度或宽度，因为Sass只编译为CSS。你所要求的必须是CSS的一个特性。不，Sass不是一个“强大的专业级CSS扩展”，它是一个CSS预处理器，将Sass/SCSS编译成CSS。这就是一切。既然它从未发送到浏览器，你怎么能期望Sass知道你页面上任何元素的宽度？@cimmanon在这里检查你知道我为什么使用“强大的专业级CSS扩展”，谁告诉你Sass发送到浏览器，我只想要编译后的CSS结果与Sass一起工作，每个使用sass的人都不在浏览器中运行sass/发送到浏览器，这是将他们的代码编译为css的原因，这就是为什么他们称之为css预处理器。很好，但这个答案只有在视图端口大小和容器宽度的值相同的情况下才可能实现。但这里两者都不一样，那么它是如何做到的呢？