在 LESS 中使用 IE8 @media \0screen 查询答案

【问题标题】：Using the IE8 @media \0screen query in LESS在 LESS 中使用 IE8 @media \0screen 查询
【发布时间】：2013-10-22 23:21:03
【问题描述】：

在我正在开发的应用程序的 CSS 中，我需要包含一些专门针对 IE8 的样式。样式代码写在几个 LESS 文件中，然后使用 CodeKit 或 Mac OS X 上的 LESS 应用程序编译成一个 CSS 文件，供我们用于实时应用程序。

这是我想在我的 LESS 文件中使用的 CSS 代码：

@media \0screen {
  .thumbnail div img {
     width: 58px;
   }
}

但是，LESS 不接受 \0screen 作为有效代码，并且在尝试使用此代码编译我们的 LESS 文件时，CodeKit 和 LESS 应用都会返回错误。

我知道我们可以为 IE8 使用条件 cmets 和替代 CSS 文件，但由于此时所需的修复只有几行，我非常喜欢使用 @media 查询并保留编译后的 CSS到一个文件。

在LESS website 上，有一个简短的章节介绍使用~"" 转义代码，但它似乎只适用于值。

如果我将查询和 CSS 代码直接放入已编译的 CSS 文件中，则其中的查询和 CSS 代码非常适合 IE8，但显然我不想每次编译后都附加已编译的 CSS。

还有其他方法可以在 LESS 中转义这个查询吗？

【问题讨论】：

我经历了一些你提到的使用 Sass 的事情。它不会解析 \0/ IE8 特定的样式，所以在变量中定义它而不是 $hack_ie8:"\0/"; 然后在样式 @ 987654328@
我在这里回答了一个非常相似的问题：stackoverflow.com/questions/17699588/viewport-media-and-less/…

【解决方案1】：

按照作为评论发布的提示 grimmus，我设法通过创建 LESS 变量然后在 @media 查询中使用该变量来解决此问题。

我把它放在我的变量中：

@ie8: \0screen;

然后在查询中：

@media @ie8 {
  .thumbnail div img {
    width: 58px;
  }
}

像魅力一样工作！向grimmus 提出建议。

【讨论】：