如何在 LESS 中转义媒体查询中的反斜杠？

Question

我有一些问题 在 LESS 中转义反斜杠。这是我的代码：

/* Internet Explorer 9-10 */
@media screen and (min-width: 0[=10=]) {

}

如有任何建议，我们将不胜感激。

非常感谢。

Answer 1

@min-width: ~"screen and (min-width: 0[=10=])";

@media @min-width {
    .box {
        width: 100%;
    }
}

输出到：

@media screen and (min-width: 0[=11=]) {
  .box {
    width: 100%;
  }
}

编辑

要转义字符串，请使用“~”，如下所示：

@media screen and (min-width: ~"0[=12=]") {
    .box {
        width: 100%;
     }
}

Answer 2

From LESS's documentation:

String Functions

e

CSS escaping, replaced with ~"value" syntax.

它需要字符串作为参数，return 它的内容是原样，但没有引号。它可用于输出 CSS 值，该值要么是无效的 CSS 语法，要么使用 Less 无法识别的专有语法。

可按如下方式使用：

@media screen and (min-width: ~'0[=10=]') { ... }

这也可以作为函数调用（使用 e(...)，文档中未提及）：

@media screen and (min-width: e('0[=11=]')) { ... }

如何在 LESS 中转义媒体查询中的反斜杠？

How do I escape a backslash inside media-queries in LESS?

css

backslash

less

media-queries

String Functions

e