3

这是现有的通用 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 文件（知道主题实现）来指定应该用什么替换哪些类。

4

3 回答 3

3

您可以使用转义来实现此目的：

@selector: '.myclass';

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

但是你不能这样做：

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

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

@selector: '.myclass .another';
于 2012-04-24T16:23:35.060 回答
2

You need to produce a function of two arguments that generates the desired CSS:

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

(Feel free to try this in the online less compiler)

This piece of code produces the desired CSS for elements with name "foo" and caption "bar". You just need to make more calls to the .generator function with different arguments to obtain what you need.

If this does not correspond to what you need, please provide one additional example of your desired CSS output.

于 2013-06-05T13:51:19.377 回答
0

看起来mixins是你需要的：

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

您可以定义一个使用或不使用的类，然后您可以在其他选择器中一次又一次地引用它。您甚至可以将它们与新样式结合起来，从而扩展原始 CSS 块的功能：

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

在编译器中试一试！

于 2012-04-18T13:12:50.813 回答