减去注释中的变量

Question

我需要在类的前面生成一些带有注释的CSS，在这些注释中，我需要评估一些变量。我在Sass中已经成功地做到了这一点，但是Less似乎没有相同的功能。

我需要的是：

/**Header*/
.Header {
  font-size: 1.5em;
}

这是我在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;
}

下面是我在“减少”中的尝试：

.rte_element (@name, @rules) {
    @className: e(replace(@name, " ", ""));
    /**@{name}*/
    .@{className} {
        @rules();
    }
}

.rte_element("Header 2", {
    font-size: 1.5em;
});

在注释中对变量进行插值/求值是否有可能？如果是这样的话，是怎么做的？

Answer 1

没有一种直接的(无恶意的)方式来实现这一点。较少的编译器不会计算注释中存在的任何变量，因此它将继续以@{var}形式打印，而不是以求值的形式打印。

然而，这并不意味着根本没有办法。有一种方法可以实现某种接近的目标。这将是将整个注释文本放入一个临时变量中，并使用选择器内插技术在选择器之前打印它。

注释不会对编译后的CSS的工作方式产生任何影响(因为UA只会忽略注释，引用末尾的代码片段--它使用由此代码生成的已编译CSS )，但它没有中断行。

注意：i绝对不会推荐实现这样的黑客解决方案。我在这里这样做只是为了表明，它可以以不同的方式进行。

减码：

.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;
});

使用编译的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>

​

注释后换行的代码：

这甚至更令人讨厌，但它是似乎在最新的编译器中工作。。

.rte_element(@name, @rules) {
  @className: e(replace(@name, " ", ""));
  @comment: ~"/* @{name} */
" ;   /* note how there is a line break inside the quotes */
  @{comment} .@{className} {
    @rules();
  }
}