Question

我们有一个有趣的困境。

我有一个PR为rupture project打开以命名它导出的函数，以便添加无冲突模式。

首先是演员

有两个名为landscape和portrait的函数（或mixins）。 PR将它们命名为rupture-landscape和rupture-portrait。始终使用@media mixin。

现在是现场。

通过破裂创建的一些功能，组装一个字符串以与媒体标签一起使用。最终结果应该是普通的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。引用的@media页面还有一个关于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

手写笔：阻止媒体标记解释字符串

1 个答案: