Selector Interpolation in less causing compiling errors.

[DanielSvanstrom]

This example is narrowed down to its bare minimum in order to demonstrate the issue easily.

Given the following less code (in a file called main.less):
.call-me () {
@A: '.something';
(~'@{a}')
{
// Removed code in example
}
}

I have tried this towards online less compilers such as http://lesstester.com/ and http://winless.org/online-less-compiler and it does not generate any errors. When I run this in the standalone less4j I get the following compiling errors:

java -jar less4j-0.0.5.jar main.less
Errors produced by compilation of main.less
ERROR 3:2 no viable alternative at input '(' in abstract mixin or namespace (which started at 1:1)
ERROR 3:4 no viable alternative at input ''@{a}'' in selector (which started at 3:3)
ERROR 7:1 extraneous input '}' expecting EOF in stylesheet (which started at 1:1)
Could not compile the file main.less

[SomMeri]

The example is related to two not yet implemented less features:

• string interpolation Variables Embedded in Strings (String Interpolation) #20,
• escaping Escaping ~"ms:alwaysHasItsOwnSyntax.For.Stuff()" #21.

String interpolation should not be too complicated and is planned to go into the next release.

I can do escaping after that, it seems to be important. It is hard to estimate when it will be done, because I did not analyzed it yet. It may be either very easy or very hard to do - depending on where exactly is the ~"included stuff" syntax allowed.

If you know the list of all places where the ~"..." can go, it would be very welcome.

[rubine]

I'm a colleague to DBarbarian and we think I'm more qualified to answer.
Regarding the selector interpolation it sounds good if you can fix it for the next release.
And we suspected that you would go with the escaping method to solve the problem http://lesscss.org/#-selector-interpolation see the note.
But if you have a fix for:
.call-me () {
@A: '.something';
@{a} { // Removed code in example }
}
We will be more then glad to use that syntax instead.
Otherwise escaping would be good to have in our IE specific less files (we support IE7) but I haven’t use escaping to something else then hack IE or selector interpolation.

[SomMeri]

Selector interpolation is now implemented with (~"@variable") syntax. I did not implemented the older syntax without parentheses ~"@variable", because less.js-1.3.1 does not support it.

The original example by DBarbarian works now (or will work after next release). This:

.call-me () {
  @a: '.something';
  (~'@{a}') {
    margin: 2 2 2 2;
  }
}

#nested {
  .call-me ();
}

compiles into:

#nested .something {
  margin: 2 2 2 2;
}

Note: the second example is very similar, but miss parentheses around the ~'@{a}' selector. It uses the unsupported syntax and will not work.

[SomMeri]

Just to clarify: less.js have to different syntaxes on how to interpolated selectors.

• special selectors escaping: (~'@{a}') - the one used in the first example on this issue
• variable directly placed in the selector: @{a} - the one used in the second example on this issue

Less.js currently accepts both, but the syntax (~'@{a}') is older and was lately deprecated. It is possible that they will remove it in 1.4.0.

Less4j accepts only the older (~'@{a}'). The newer syntax used in the second example (used by rubine) is not implemented. I opened new issue for the new syntax: #57

Feel free to reopen this issue or add comment if the second syntax is what you actually need.

[SomMeri]

The other syntax is now implemented too. New release will be available soon.

[DanielSvanstrom]

Is this included in version 0.0.6?

[SomMeri]

It is included in 0.0.7 - it was released yesterday. Library is available in maven and command line is available in less4j dropbox account.

[SomMeri]

It is included in 0.0.7 - it was released yesterday. Library is available in maven and command line is available in less4j dropbox account.