Sassでのメディアクエリの短縮

Question

Sassでは、応答性を処理するために3つの別々のメディアクエリを連鎖しなければなりませんでした。現在のところ、このような長い混乱があります：

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