媒体查询中的字符串插值

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