sass - 使用 Sass 的断点扩展编写垂直媒体查询的首选方式

Question

使用 Sass 扩展断点，是否有一种首选的方式来编写只有一个查询值参数的垂直媒体查询？

这是我最终想要完成的一个例子：

@media (max-height: 50em) {
  .item {
    font-size: 2em;
  }
}

或者，我是否应该对这些样式进行简单的“即时”媒体查询，例如：

.item {
  @media (max-height: 50em) {
    font-size: 2em;
  }
}

这是可以用变量处理的吗？

我的样式是“移动优先”，因此该站点上的所有其他媒体查询都使用 Breakpoint 的默认“最小宽度”设置。

谢谢！

score 1 · Accepted Answer

您可以执行以下操作：

$vertical: 'max-height' 50em;

.item {
  @include breakpoint($vertical) {
    font-size: 2em;
  }
}

您还可以在其他查询中包含高度查询，如下所示：

$mixed: 15em ('max-height' 50em);

.item {
  @include breakpoint($mixed) {
     font-size: 2em;
  }
}

1 回答 1