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

Question

在CSS注释中使用LESS变量来进行mixin，以便于精灵图制作。例如（下面的代码是无法正常工作的，只有图片路径被替换了）：

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

奖励问题：编译后，我能否防止background-image和sprite-comment之间的换行？

- Riebel

---

为什么这样做？代码中的注释是为了帮助开发人员，因此无需动态地呈现它们。甚至建议删除不必要的代码（注释、换行符等），以减小文件大小。 - Shankar Cabus

这些注释是精灵解析器的精灵指令。它们需要动态地从样式表创建精灵。SmartSprites - Riebel

下一个版本计划支持LESS。请查看uservoice的想法。 - rocky

Answer 1

我发现这个问题是因为我想要自动化的语义评论，然后将其输入到Kentico（一种.NET CMS）中。因为接受的答案似乎有点不尽人意，所以我尝试了一些自己的方法，并设法产生了更好的解决方案。也许这是由于 less 语法自那时起发生了变化...

// 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}

- nirazul

Answer 2

不可以在注释中使用变量。

那么，添加一个被浏览器忽略的属性“comment”呢？

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

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

但这样会产生两个分号（有效的 CSS），而且有点 hacky。

- Luke Page

---

background-image: ~"url('../img/@{width}/picture.png'); /** sprite-ref: sprite-@{width}; */"; 这种方式有点用。但是现在我遇到了相对路径的问题。使用客户端的less.js解析器时，图片无法加载。 - Riebel

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)
*/

- Rodrigo Calix