Tell LESS to not freak out in certain special cases and ignore weird characters

Question

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

This also extends to class names themselves:

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

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?

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)

Is [this](http://codepen.io/hari_shanx/pen/hgofF) what you want? You can do it using escaped strings. — Harry, Jul 24 '14 at 07:30
@Harry I'd love an explanation how this witchcraft happens (i.e. what that magical tilda is doing) — yuvi, Jul 24 '14 at 08:07

score 3 · Accepted Answer · edited May 23 '17 at 12:06

3

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

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

Demo

Update:

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.

edited May 23 '17 at 12:06

Community

1
1

answered Jul 24 '14 at 08:08

Harry

87,580
25
202
214

2

@yuvi: One small thing note, using the above method the `@{left}: 10px` alone would not produce `@LEFT@: 10px` output. Seems like it is a limitation. But we can overcome it by doing a workaround as `-inj:~"1; @{left}:"10px;`. This would produce `-inj: 1; @LEFT@: 10px;` but the `-inj: 1;` has no meaning and hence all browsers would just ignore it. Approach is picked from [this thread](http://stackoverflow.com/questions/14868042/using-variables-in-property-names-in-less-dynamic-properties-property-name-in). – Harry Jul 24 '14 at 08:37
It's weird, though. According to the thread you linked this isn't an issue as of version 1.6 - I'm using 1.7 and seeing the problem. how come? – yuvi Jul 24 '14 at 08:57
Same here mate, I am finding it wierd too. I didn't expect this issue and that's why didn't mention in the original answer, but then I was double checking your sample in question and found this. It should be mostly because of the `@` in front (the example in the linked thread doesn't have it). I will let you know if I happen to find a reason. – Harry Jul 24 '14 at 09:07
2

Here's another silly workaround: define `@i: ~" ";` at the top, then: `@{i}@{left}: 10px;` results in `@LEFT@: 10px;` with an added space – yuvi Jul 24 '14 at 09:30
1

I've [opened an issue](https://github.com/less/less.js/issues/2168) about the weird behavior. – yuvi Aug 27 '14 at 13:17
1

**update:** the issue [has been fixed](https://github.com/less/less.js/pull/2173) – yuvi Oct 22 '14 at 10:39

Tell LESS to not freak out in certain special cases and ignore weird characters

1 Answers1

Linked

Related