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';

Answer 2

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

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

（您可以在online less compiler）

中尝试此操作

这段代码为名为“foo”和标题为“bar”的元素生成所需的CSS。您只需要使用不同的参数调用.generator函数，以获得所需的内容。

如果这与您的需求不符，请提供您想要的CSS输出的另一个示例。

Answer 3

看起来mixins就是你所需要的：

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

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

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

在编译器中试一试！

较少CSS：选择器替换？

3 个答案: