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