Stylus：防止媒体标签解释字符串

Question

我们有一个有趣的困境。

我有一个 PR open for the rupture project 来命名它导出的函数以添加无冲突模式。

首先是演员

有两个名为 landscape 和 portrait 的函数（或混入）。 PR 将它们命名为 rupture-landscape 和 rupture-portrait。 @media mixin 贯穿始终。

现在的场景。

通过rupture创建的一些函数，组装一个字符串与media标签一起使用。最终结果应该是正常的 css 媒体查询。

问题在于手写笔@media mixin。它似乎会自动尝试解释字符串并扩展范围内可能存在的任何关键字。

由于在不使用无冲突模式时横向和纵向都在范围内，因此当 @media 标签与 composed string 和 orientation: portrait 或 orientation: landscape 一起使用时结果将在 portrait 和 landscape 两个词前加上 rupture.

我创建了一个简单的示例，并尝试了几次修复 codepen here 上的问题。

这里还有代码：

手写笔

$landscape = 'notlandscape'
$string = "only screen and (orientation landscape)"
$unquote = unquote($string)
$s = s($string)

.foo
  // this is the main issue
  @media $string
    color: blue
  These two are attempts to fix the issue
  @media $unquote
    color: blue
  @media $s
    color: blue

编译结果在CSS

@media only screen and (orientation: 'notlandscape') {
  .foo {
    color: #00f;
  }
}
@media only screen and (orientation: 'notlandscape') {
  .foo {
    color: #00f;
  }
}
@media only screen and (orientation: 'notlandscape') {
  .foo {
    color: #00f;
  }
}

实际需要的输出：

@media only screen and (orientation: landscape) {
  .foo {
    color: #00f;
  }
}

有没有办法防止或规避这种行为？

Answer 1

您可以尝试 interpolation. The referenced @media page also has a section about Interpolations and variables，它将提供更多信息和示例。

landscape = 'notlandscape'
$string = "only screen and (orientation landscape)"

.foo
  @media ({$string})
    color: blue

直播@codepen

这里的括号是必不可少的。 所以它不是完全需要的输出，但它仍然有效 CSS。如何避免这种情况（或者如果有必要）取决于用例。一个想法：

landscape = 'notlandscape'
$string = "orientation: landscape"

.foo
  @media only screen and ({$string})
    color: blue

直播@codepen

Stylus：防止媒体标签解释字符串

Stylus: prevent media tag from interpreting strings

stylus