媒体查询中的字符串插值

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

您必须在选择器和属性中使用插值。要删除 key 值中的引号，您可以使用 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;
  }
}

媒体查询中的字符串插值

string interpolation in media queries

stylus