Question

在Sass中，我必须将三个独立的媒体查询链接在一起以处理响应性。目前这是一个长期混乱的样子：

os.waitpid

我想缩短查询，但不确定如何。是否有可能使这更容易阅读？

使用的变量在我制作的设置页面中定义并具有以下值：

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

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
);

缩短Sass中的媒体查询

1 个答案: