告诉 LESS 在某些特殊情况下不要惊慌并忽略奇怪的字符

我们的服务器有一个用于 CSS 文件的自定义语言切换器。它识别某些模式和开关left & right命令（除其他外）。为了告诉它切换到哪里，我们使用@RIGHT@ and @LEFT@任何需要的地方：

div.somecls {
    margin-@RIGHT@: 15px;

    &:after {
        content: "\f061";
        font-family: FontAwesome;
        position: absolute;
        @LEFT@: 10px;
        top: 20px;
    }
}

这也扩展到类名本身：

.push-@RIGHT@ {
    /* ... */
}

到目前为止，我编写了一个节点脚本来编译CSS然后替换left and right与适当的替代品。不过，我想知道——有没有办法告诉 LESS 忽略某些事情并认为它们是正常的？

这样我就可以写@LEFT@在 LESS 文件本身中，而不是过度思考（这将提供很大的灵活性，特别是在某些情况下，我don't希望语言切换器做任何事情，而不是使用left)

你可以告诉 LESS 忽略像这样的字符@通过使用转义字符串，如下所示：

这基本上就像做var a = "1+2";在任何编程语言中。它将其视为字符串并且不执行任何额外的操作。但在 LESS 中，当我们只提供"@RIGHT@"，它会用引号打印，为了避免引号，我们需要在前面使用 tilda 字符。

@right: ~"@RIGHT@";
@left: ~"@LEFT@";

div.somecls {
    margin-@{right}: 15px;

    &:after {
        content: "\f061";
        font-family: FontAwesome;
        position: absolute;
        border-@{left}: 10px;
        top: 20px;
    }
}
div.@{left}{
  color: blue;
}

Demo

Update:

正如中提到的comments，早些时候，当属性值对如下时，上述方法将不起作用@{left}: 10px。也就是说，编译时它不会产生如下输出@LEFT@: 10px。这个问题现在已经fixed.