Question

我需要在类的上方生成一些带有一些注释的CSS，在那些注释中，我需要评估一些变量。我在Sass中成功完成了这项工作，但Less似乎没有相同的功能。

这就是我需要的：

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

这是我在萨斯的尝试：

@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;
}

这是我在Less中的尝试：

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

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

Less可以在评论中插入/评估变量吗？如果是这样，怎么样？

Answer 1

在Less中没有直接（非hacky）的方法来实现这一点。 Less编译器不会评估注释中存在的任何变量，因此它将继续打印为@{var}而不是评估值。

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

注释不会对编译的CSS如何工作产生任何影响（因为UA将忽略注释，最后引用代码片段 - 它使用此代码生成的编译CSS）但它没有线断裂。

注意：我 绝对不会建议 实施此类hacky解决方案。我在这里给出的只是为了表明它可以用不同的方式完成。

减少代码：

.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>

评论后的换行符代码：

这更令人讨厌，但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();
  }
}

评论中的变量较少

1 个答案: