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

Posted 2023-03-06

【中文标题】是否可以使用 sass 函数在媒体查询中从父宽度动态获取子高度？ [复制]

【英文标题】：Is it possible to get child height from parent width dynamically on media query using by sass function? [duplicate]

【发布时间】：2016-04-28 21:53:29

【问题描述】：

我想使用 sass 函数动态设置各种屏幕尺寸的子项高度，而不是手动编写。我知道我们可以使用 css position: absolute; 属性或简单地使用 jQuery 代码来获取结果，但我想使用 sass 函数来实现子项值。

**我们可以将宽度作为百分比值，但是在给出百分比值时，如果不给出position: absolute;，则无法得出高度。

检查我的笔：http://codepen.io/nikhil8krishnan/pen/adqbeR?editors=1000

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

输出

.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 函数编写这些代码？有没有可能请分享想法。

【问题讨论】：

实际上你不需要总是为每个断点更改 .child 。一旦你将它们设置为 width: 25% 就足够了。只需更改容器（您甚至可以使用 width: 80% after 768px）

那我怎样才能得到子项的高度呢？

Sass 没有获取任何元素的高度或宽度的功能，因为 Sass 只编译为 CSS。你所要求的必须是 CSS 的一个特性。

不，Sass 不是“强大的专业级 CSS 扩展”，它是一个将 SASS/SCSS 编译为 CSS 的 CSS 预处理器。这就是一切。既然它从不发送到浏览器，那么您究竟希望 Sass 如何知道您页面上任何元素的宽度？

@cimmanon 在这里查看sass-lang.com 你知道我为什么使用“强大的专业级 CSS 扩展”，谁告诉你 sass 发送到浏览器，我只希望编译后的 css 结果有效使用 sass，每个人都在使用 sass，这意味着他们不会在浏览器中运行 sass/发送到浏览器，它将他们的代码编译为 css，这就是他们称为 CSS 预处理器的原因。

【参考方案1】：

要自动导出媒体查询，您可以使用以下函数

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

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

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

一个例子：http://www.sassmeister.com/gist/e87c4121d584776355cd

【讨论】：

很好，但这个答案只适用于视口大小和容器宽度的相同值。但是这里两者都不一样，那它是怎么做到的呢？