css - 在 Sass 中缩短媒体查询

Question

在 Sass 中，我不得不将三个独立的媒体查询链接在一起来处理响应。目前看起来像这样一团糟:

@media (max-width: $tablet-portrait-width) and
       (max-height: $tablet-portrait-height) and
       (min-height: $landscape-min-height)

我想缩短查询，但不确定如何缩短。是否可以使它更易于阅读？

使用的变量在我制作的设置页面中定义并具有这些值:

$landscape-min-height: 200px;
$tablet-portrait-height: 1024px;
$tablet-portrait-width: 768px;

Answer 1

创建一个@mixin(这类似于一个函数)并定义它的参数，然后用@include 调用它。您可以复制以下代码到SassMeister查看结果。

@mixin mediaQ($max-width: 0, $max-height: 0, $min-height: 0) {
  @media screen and (max-width: $max-width)
                and (max-height: $max-height)
                and (min-height: $min-height) {
    body {
      font-size: 14px;
    }
  }
}

$landscape-min-height: 200px;
$tablet-portrait-height: 1024px;
$tablet-portrait-width: 768px;

@include mediaQ(
  $tablet-portrait-width,
  $tablet-portrait-height,
  $landscape-min-height
);