如何在CSS注释中使用LESS变量

Question

是否可以在用于mixin的CSS注释中使用LESS变量？我需要它来喷水。

例如（不工作/只有图像路径被替换）：

.sprite (@width) {
    /** sprite: sprite-@{width}; sprite-image: url('../img/@{width}/sprite-@{width}.png'); sprite-layout: vertical */
    .picture {
        background-image: url('../img/@{width}/picture.png'); /** sprite-ref: sprite-@{width}; */
    }
}
.sprite(800);

附加问题：用lessc编译后，我可以防止背景图像和精灵评论之间的换行吗？

Answer 1

不，你不能在注释中做变量。

添加一个被浏览器忽略的属性comment怎么样。

你可以尝试使用转义字符串，例如

prop: ~"url('blah'); /* comment */";

但它会产生2个分号（有效的CSS），而且非常麻烦。

Answer 2

我偶然发现了这个问题，因为我想将自动语义注释输入Kentico（一个.NET CMS）。因为公认的答案似乎有点不令人满意，我自己尝试了一些事情，并设法找到了一个更好的解决方案。也许这是由于从那时起较少的语法发生了变化。。。

// DEFINITIONS
@A:   (~"A Standard");
@X-1: (~"1 General");
// BASIC DEFINITIONS
@start: (~"/*# ");
@end:   (~" #*/");
@sep:    (~" / ");
// FORMULA
@{start} @{A} @{sep} @{X-1} @{end}
* { text-decoration: none; }

输出为：

/*# A Standard / 1 General #*/ * {
     text-decoration: none;
}

唯一困扰我的是评论后面缺少的一行。不幸的是，我使用的是无点编译器，它无法评估js函数。我在结尾添加了一个空评论，这对我来说很有用

如果您使用浏览器版本，您可以使用以下变量插入新行：

@nl: (~`"n"`)

导致：

@{start} @{A} @{sep} @{X-1} @{end} @{nl}

Answer 3

我有一个很好的解决方案：

创建一个文件并将其命名为start-comment.css，在文件中添加该内容/*，然后创建另一个文件end-comment.css，在文件内仅添加该*/，最后在其中创建另一文件，例如-description.txt，在注释中添加您想要的所有内容，现在在您的.less文件中添加下一个代码：

@import (inline) "start-comment.css";
@import (inline) "description.txt";
@import (inline) "end-comment.css";

最后你会得到这样的东西：

/*
(The content that i add in my text file)
*/