串插查詢

Question

我期待這個代碼把

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

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

到

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

的mediaStatement變量不插 - 什麼是這個正確的語法？

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; 
    } 
}