An empty variable used as a selector for a scope works, but is it an intentional language feature?

[Giwayume]

I wanted a variable that optionally adds an extra CSS class to scope some selectors, and this works:

This:

@scope-selector:;
@{scope-selector} {
  .red {
    color: red;
  }
}

Generates:

.red {
  color: red;
}

And this:

@scope-selector: ~".theme-class";
@{scope-selector} {
  .red {
    color: red;
  }
}

Generates:

.theme-class .red {
  color: red;
}

I'm not confident that the first example with @scope-selector:; is an intentional language feature, though. Can someone confirm this?

[seven-phases-max]

Use & instead. While not quite documented, the & { } trick is a sort of well established feature by now and treated as "intended" for a while (it's like we're suggesting this "anonymous scope" thing in every third post :). While "empty value" selector is really more like a totally unspecified behaviour, indeed.

[Giwayume]

Can you give an example, because I've already tried that. It outputs the & character in the generated CSS.

@scope-selector: &;
@{scope-selector} {
  .red {
    color: red;
  }
}

or

@scope-selector: ~"&";
@{scope-selector} {
  .red {
    color: red;
  }
}

generates

& .red {
  color: red;
}

[seven-phases-max]

& {
  .red {
    color: red;
  }
}

(Not counting that for this snippet you don't need any extra selector since .red block already has its own unique scope. Probably if you give more details about what exactly you're trying to achive so we could avoid usual XY-problem confusions).

---

Or do you mean that you just need some variable that can either produce an identifier or an empty value (i.e. with "scope" you mean just "HTML scope")? Then yes, @scope-selector:; is fine.

[Giwayume]

The variable may be poorly named, basically my original comment is a working example of exactly what I'm trying to achieve. A LESS variable adds an optional CSS class in front of everything, or no class if the variable is empty. I was just asking if @scope-selector:; is intended to work by design, as I don't see empty LESS variables anywhere in the documentation.

[matthew-dean]

@Giwayume I'd say there's at least some risk that @scope-selector:; might fail to evaluate someday, but there's no current plans to change it.

You could also do something like:

.scope(@sel) {
  @{sel} {
    .selectors();
  }
}
.scope() {
    .selectors();
}
.selectors() {
  .red {
    color: red;
  }
}
.scope();

[Giwayume]

So there's no official way to just make a variable output nothing? Like an empty string?

[rjgotten]

So there's no official way to just make a variable output nothing? Like an empty string?

~"" does just that: an empty string literal.

[Giwayume]

Does that mean this is by design:

@scope-selector:~"";

Or is it any better or worse than just leaving it out?

@scope-selector:;

[seven-phases-max]

Yet again, there's no plans to change @scope-selector:; behaviour (resulting in an empty value).
So it's fine to have it if you find it looks fine on you own (E.g. I do in some of my examples at SO).
However, considering that you can't use the same trick anywhere else, e.g. you can't pass such empty arg to functions, mixins in-place and so on, i.e this is very specific and rare snippet, for your own readability you may find it more safe to use ~'' instead.

[seven-phases-max]

Closing as expected behaviour.