property interpolation doesn't work with special @ character without a prefix #2168
Description
interpolation for properties with @ don't work if the interpolation isn't prefixed by something. I recently wanted to replace all occurrences of left with @LEFT@ and right with @RIGHT@ (for rtl-support purposes, our server knows to switch it according to language set by the user).
To do so, I set a variable using the tilda character ~. However, I stumbled upon a weird bug, check it out:
@left: ~"@LEFT@";
.widget {
margin-@{left}: 10px; // this works
float: @left; // this works
@{left}: 10px; // this doesn't
}
The first two will work, but the last one won't, i.e. this is the result:
.widget {
margin-left: 10px;
float: left;
}
I found one ridiculous workaround by using another empty variable:
@left: ~"@LEFT@";
@i: ~" ";
.widget {
@{i}@{left}: 10px;
}
Anyway, I'm guessing this has to do with the fact that @ is used by LESS to identify variables, but still, I would consider this a bug as the ~ should tell less to ignore that (and since all other interpolations work, I'm thinking this special case should too).