Question

是否可以在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编译后，我可以阻止背景图像和精灵注释之间的换行吗？

Answer 1

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

如何添加浏览器忽略的属性“评论”。

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

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

但是它产生了2个分号（有效的CSS）并且非常hacky。

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，内部只添加此*/，最后在那里创建另一个文件eg- 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)
*/

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

3 个答案:

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