how do add a dot to a variable to be used as selector in less

Question

I'm currently getting this output:

.'teal-dark' { color: #xxx; }

What I want is this: {

.teal-dark { color; #xxx; }

Here is what I'm trying to do:

 @teal-dark: #xxx;
.@{currentMember} div { background: ~"@{@{currentMember}}" };

That syntax would work fine mate but it depends on whether you are assigning value to the `@currentMember` as `teal-dark` or as `'teal-dark'`. If your variable value has quotes for some reason then you can use the method mentioned in [this](http://stackoverflow.com/questions/19614621/less-mixin-output-values-without-quotes/19614647#19614647) answer to remove it from the output. — Harry, Jan 09 '15 at 03:41
i have to use string otherwise it will interpolate colors like `grey` to `#808080` which I don't want. — chovy, Jan 09 '15 at 20:18
Got you mate. In that case the solution mentioned in the answer that I linked in my previous comment is your best bet. Also Less v2.0 and higher would not do the color name to hex code auto conversion. So upgrading the Less compiler would also help :) — Harry, Jan 09 '15 at 21:39
@harry upgrading does not help. Indeed colored names are not be converted to their hex value anymore, but `grey` is still a color not a string. — Bass Jobsen, Jan 10 '15 at 01:50
@BassJobsen: True mate. I stand corrected. I just confused it a bit with using variables as property values. It wouldn't work for selector interpolation. — Harry, Jan 10 '15 at 05:45

score 1 · Answer 1 · edited May 23 '17 at 11:57

1

@current-member: teal-dark;
@teal-dark: red;

.@{current-member} {
color: @@current-member;
}

compiles into:

.teal-dark {
  color: red;
}

Possible relevant questions:

edited May 23 '17 at 11:57

Community

answered Jan 09 '15 at 11:45

Bass Jobsen

score 0 · Answer 2 · answered Jan 09 '15 at 20:27

0

Here's the fix from another post:

    @selector: ~'.@{currentMember}';
    @{selector} div { background: ~"@{@{currentMember}}" };

answered Jan 09 '15 at 20:27

chovy

2 Answers2