手写笔：防止媒体标签解释字符串

我有一个PR为rupture project打开命名空间它的导出功能，以添加一个无冲突模式。

首先演员

有两个函数（或混入）被命名landscape和portrait。 PR命名空间为rupture-landscape和rupture-portrait。整个使用mixin的@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; 
    } 
}

有一种方式防止或规避这种行为？

来源

2016-10-26 Berkeley Martinez

只是要清楚这里。你能添加所需的输出吗？ –

我已经添加了期望的输出 –

为什么不在你的PR破裂中做同样的事情？ '$ string =“唯一的屏幕和（方向s（'风景'）”' – blonfu

您可以试试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

来源

2016-10-27 21:00:59

谢谢你的回答。这足以让测试套件通过，尽管我希望有一个更简洁的方法来做到这一点。 –

手写笔：防止媒体标签解释字符串

回答

相关问题