文字列の補間は

Question

を照会私はmediaStatement変数が補間されません

body 
    @media (min-width: 320px) 
    max-height 140px 
    @media (min-width: 768px) 
    max-height 180px 

に

propMediaQuery(mediaStatement, prop, propResolutionObj) 
    for key, value in propResolutionObj 
    @media (mediaStatement: value) 
     prop value 

body 
    propMediaQuery(min-width, max-height, { '320px': 140px, '768px': 180px }) 

を回すために、このコードを期待してい

Answer 1

セレクタとプロパティで補間を使用する必要があります。 キーの値を引用符で囲まないようにするには、unquote()の機能を使用できます。

スタイラス

propMediaQuery(mediaStatement, prop, propResolutionObj) 
    for key, value in propResolutionObj 
    @media ({mediaStatement}: unquote(key)) 
     {prop} value 

body 
    propMediaQuery(min-width, max-height, { '320px': 140px, '768px': 180px }) 

CSS

@media (min-width: 320px) { 
    body { 
    max-height: 140px; 
    } 
} 
@media (min-width: 768px) { 
    body { 
    max-height: 180px; 
    } 
}