メディアクエリで動的変数を使用するには？

Question

私は以下のようないくつかの変数を持っていますが、私は＃{viewport- $ type}を使用しようとしていますが、私はそれをメディアクエリで使いたいですが、クエリ式 "と呼ばれる。では、どうしたらいいですか？誰でも助けてくれる？ありがとう。

$viewport-large: "max-width: 1441px"; 
$viewport-midium: "max-width: 1281px"; 
$viewport-small: "max-width: 1025px"; 

$type: midium; 

@media (#{viewport-$type}) { 
    // ... 
} 

Answer 1

Sassのメディアクエリ内で変数を動的に参照することはできません。ただし、このような場合はSass mapsとmap-get functionを使用できます。

$viewport:(
    large: "max-width: 1441px", 
    medium: "max-width: 1281px", 
    small: "max-width: 1025px"); 

$type: medium; 

@media (map-get($viewport, $type)) { /* map-get - param 1 is the map, param 2 is the key */ 
    #demo { 
    color: red; 
    } 
} 

ここにはreference thread from Sass GitHub pageがあります。