Less 更少的CSS：选择器替换？

这是现有的通用css规则（原始文件）：

这是示意图，因为在现实生活中，我需要将

.caption top

选择器变成其他选择器，具体取决于上下文。但是我想使用一个变量，而不是更改选择器的所有出现项。例如，在一个上下文中，它应该变成

。字段名字段标题顶部

。所以我做了这个（包装文件）：

这会产生较少的解析错误。是否有其他方法来建立规则以替换选择器？因此，对于上述示例，规则最终将如下所示：

.field-name-field-caption-top {
  color: red;
}

其他信息

---

关键是不要触及原始css文件，因为它来自外部，将被覆盖，而是要将其包装起来，告诉更少的人如何用特定主题中使用的类替换现有的类。如果无法实现，则可接受的解决方案是以自动方式更改原始文件，例如，将所有出现的“.caption”替换为“@caption”（我在上面的代码示例中建议），或在开始时进行导入等。然后使用无包装文件（了解主题实现）要指定哪些类将被替换为什么类。

看起来mixin就是您所需要的：

.caption-top {
    color: red;
}
.field-name-field-caption-top {
    .caption-top
}

您可以定义一个类，该类无论是否使用，都可以在其他选择器中反复引用。您甚至可以将它们与新样式相结合，从而扩展CSS的原始块的功能：

.field-name-field-caption-bottom {
    font-size: 3em;
    .caption-top
}

---

在编译器中试一试

您可以使用转义来实现这一点：

@selector: '.myclass';

(~'@{selector}') {
    color: red;
}

但是，您不能这样做：

(~'@{selector}') .another {
    color: red;
}

要实现上述目标，您需要修改变量

@selector: '.myclass .another';

---

您需要生成一个包含两个参数的函数，以生成所需的CSS：

.generator(@fieldName, @fieldCaption) {
  .@{fieldName}-@{fieldCaption}-top {
    color: red;
  }
}
.generator(foo, bar);

（请在中尝试）

这段代码为名为“foo”和标题为“bar”的元素生成所需的CSS。您只需使用不同的参数对

.generator

函数进行更多调用即可获得所需的内容

---

如果这与您的需要不符，请提供一个所需CSS输出的附加示例。

这不是您的目的吗？我不知道。但是，当您转到并输入上面的代码时，会出现致命的解析错误。您如何还可以使用

&

<代码>&（~'@{selector}'）。另一个{}不起作用。

@selector: '.myclass .another';

.generator(@fieldName, @fieldCaption) {
  .@{fieldName}-@{fieldCaption}-top {
    color: red;
  }
}
.generator(foo, bar);