告诉LESS在某些特殊情况下不要怪异，忽略怪异的字符

问题描述

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

Our server has a custom language-switcher for our CSS files. It recognizes certain patterns and switches left & right commands (among other things). To tell it where to switch, we use @RIGHT@ and @LEFT@ wherever needed:

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

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

这也扩展到类名本身：

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

到目前为止，我写了一个节点脚本来编译css，然后替换 left 和 right 。但是，我想知道 - 是否有一种方法可以让LESS忽略一些事情，并将其视为正常？

Till now, I wrote a node-script that compiled the css then replaced left and right with the proper replacements. However, I'm wondering - is there's a way to tell LESS to just ignore some things and regard them as normal?

可以在LESS文件中写入 @LEFT @ ，而不是重新思考它（这将允许很多灵活性，特别是如果有的情况下我不会

That way I could write @LEFT@ in the LESS file itself instead of overthinking it all (this would allow a lot of flexibility, especially if there are cases where I don't want the language switcher to do anything and rather use left)

推荐答案

希望语言切换工具执行任何操作，而使用 left >

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

You can tell LESS to ignore characters like @ by using escaped strings like below:

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

It is basically like doing var a = "1+2"; in any programming language. It treats it as a string and doesn't perform any extra operations. But in LESS when we just provide "@RIGHT@", it gets printed with the quotes, to avoid the quotes we need to use the tilda character in front.

@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;
}

更新：

如，上面的方法在属性值对类似于 @ {left}：10px 。也就是说，编译时不会产生 @ LEFT @：10px 。此问题现已。

As mentioned in comments, earlier the above method would not work when the property-value pair is like @{left}: 10px. That is, when compiled it would not produce output as @LEFT@: 10px. This issue has now been fixed.

这篇关于告诉LESS在某些特殊情况下不要怪异，忽略怪异的字符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！