少 CSS : selector substitution?

Question

这是一个现有的通用 css 规则(原始文件):

.caption-top {
  color: red;
}

这是示意图，因为在现实生活中，我需要根据上下文将 .caption-top 选择器变成其他东西。但我想使用变量而不是更改所有出现的选择器。例如，在一种情况下，它应该变成 .field-name-field-caption-top。所以我这样做了(包装文件):

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

这会产生一个 LESS 解析错误。是否有另一种方法来建立替换选择器的规则？因此，对于上面的示例，规则最终将如下所示:

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

附加信息

重点是不要触及原始 css 文件，因为它来自外部并且会被覆盖，而是将其包装起来并告诉 Less 如何用特定主题中使用的类替换现有类。如果不可能实现，那么可接受的解决方案是自动更改原始文件，例如用“@caption”替换所有出现的“.caption”(我在上面的代码示例中建议)或在开头进行导入等。然后使用包装器 Less 文件(了解主题实现)来指定哪些类应该替换成什么。

Answer 1

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

@selector: '.myclass';

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

但是你不能这样做:

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

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

@selector: '.myclass .another';