Question

我知道mixins和参数mixins。我们正在寻找的是将CSS / LESS中的任何通用选择器组合成mixin的方法。

.navbar .nav > li {
  float: left;
}

如果我必须在课堂上使用它，请说.mynavbar我希望能够这样做

INPUT->
.mynavbar {
  .navbar .nav >li;
}

OUTPUT->
.mynavbar {
  float:left;
}

现在我知道当前版本的LESS无法做到这一点，因为编译器会标记解析器错误。我希望有人帮我改变less.js的源代码，以便这样做是可行的。

我设法达到the source code for the mixin parser。我已经尝试在那里更改RegExp，但它会干扰解析器的其他部分。我知道我们只需进行一些更改，因为我们不仅要接受.mixin和#mixin，还要接受像input[type=text]这样的标签/属性选择器等任何mixin。

目前需要开发使用Bootstrap的UI框架。不幸的是，引导程序中的许多地方都充斥着直接标记选择器而不是id和类。

Answer 1

这可能since version 1.4.0 (2013-06-05)包含extend功能的LESS。基于原始示例

.navbar .nav > li {
  float: left;
}

.mynavbar:extend(.navbar .nav > li) {}

编译到

.navbar .nav > li,
.mynavbar {
  float: left;
}

文档here和讨论＆amp;示例用于原始问题here

编辑：已添加代码示例

Answer 2

首先，我强烈反对做这些事情。相反，尝试使用CSS的强大功能并构建HTML，例如，引导规则适用。无论如何，既然你要求它，这就是解决方案。

问题不在于选择器或子规则的复杂性，而在于标签名称选择器部分（即li）。所以，我们要解决的是mixin解析器只匹配类和id。我想我们不想篡改the first class or id test，~~，因为可能需要将mixins与普通的CSS规则区分开来（虽然测试运行正常但检查结果已被注释掉）。~~（实际上，在操作中有一个解析器首选项，并且在mixins之后唯一尝试的是注释和指令，因此我们也可以安全地删除该检查）。但是，我们可以通过在匹配的正则表达式中的[#.]之后添加问号，轻松地在mixin选择器的后续部分中允许标记名称。所以

while (e = $(/^[#.](?:[\w-]|\\(?:[A-Fa-f0-9]{1,6} ?|[^A-Fa-f0-9]))+/)) {

- 我即line 825 - 变成

while (e = $(/^[#.]?(?:[\w-]|\\(?:[A-Fa-f0-9]{1,6} ?|[^A-Fa-f0-9]))+/)) {

测试用例仍然很好，之后，但是我发生了微妙的破损，所以要小心。

编辑：同一问题有GitHub Issue。显然，较少的人宁愿混合功能更加狭窄和功能，而不是允许更灵活......好......混合规则。关于CSS输出，这可能是合理的。

使用通用选择器作为LESS CSS中的mixin

2 个答案: