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