6

是否可以在 CSS 注释中为 mixins 使用 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编译后防止背景图像和精灵评论之间的换行吗？

4

3 回答 3

2

不，你不能在评论中做变量。

添加被浏览器忽略的属性“评论”怎么样。

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

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

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

于 2012-08-22T17:09:41.210 回答
2

我偶然发现了这个问题，因为我想将自动语义注释输入 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}
于 2013-05-08T07:15:02.303 回答
0

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

创建一个文件并命名它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)
*/
于 2015-08-08T04:43:39.330 回答