Less variables in comments - less

Question

I need to generate some CSS with some comments right above the classes and in those comments, I need to evaluate some variables. I've been successful in doing this in Sass but Less doesn't seem to have the same functionality.
Here's what I need:
/**Header*/
.Header {
font-size: 1.5em;
}
Here's my attempt in Sass:
#function str-replace($string, $search, $replace: '') {
$index: str-index($string, $search);
#if $index {
#return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
#return $string;
}
#mixin rte_property($name) {
/**#{$name}*/
.#{str-replace($name, ' ', '')} {
#content;
}
}
#include rte_property(Header) {
font-size: 1.5em;
}
Here's my attempt in Less:
.rte_element (#name, #rules) {
#className: e(replace(#name, " ", ""));
/**#{name}*/
.#{className} {
#rules();
}
}
.rte_element("Header 2", {
font-size: 1.5em;
});
Is it possible for Less to interpolate/evaluate variables in comments? If so, how?

Answer 1

There is no straight-forward (non-hacky) way to achieve this in Less. Less compiler does not evaluate any variable that is present within comments and so it would continue to be printed as #{var} instead of the evaluated value.
However, that doesn't mean there is no way at all. There is a way of achieving something close. That would be to put the entire comment text into a temporary variable and print it before the selector using selector interpolation technique.
The comment would not cause any impact to how the compiled CSS works (because the UA will just ignore the comments, refer the snippet at the end - it uses the compiled CSS produced by this code) but it doesn't have a line-break.
Note: I would definitely not recommend implementing such hacky solutions. I have given it here just to show that it can be done in a different way.
Less Code:
.rte_element(#name, #rules) {
#className: e(replace(#name, " ", ""));
#comment: ~"/* #{name} */"; /* store the comment structure as a variable */
#{comment} .#{className} { /* print it before the selector */
#rules();
}
}
.rte_element("Header 2", {
font-size: 1.5em;
color: red;
});
.rte_element("Header 3", {
font-size: 1.75em;
color: blue;
});
Demo with compiled CSS:
/* Header 2 */ .Header2 {
font-size: 1.5em;
color: red;
}
/* Header 3 */ .Header3 {
font-size: 1.75em;
color: blue;
}
<div class="Header2">Header 2 text</div>
<div class="Header3">Header 3 text</div>
Code for a line break after comment:
This is even more hacky but it seems to work in the latest compiler.
.rte_element(#name, #rules) {
#className: e(replace(#name, " ", ""));
#comment: ~"/* #{name} */
" ; /* note how there is a line break inside the quotes */
#{comment} .#{className} {
#rules();
}
}