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

Question

我知道mixins和参数mixins.我们正在寻找的是一种将CSS/LESS中的任何通用选择器转换为mixin的方法.

例如在Twitter BootStrap中,我们在这里

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

如果我必须在课堂上使用它,请说.mynavbar我希望能够做到这一点

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

---

OUTPUT->
.mynavbar {
  float:left;
}

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

我已经设法达到mixin解析器的源代码.我已经尝试在那里更改RegExp,但它会干扰解析器的其他部分.我知道我们只需要进行一些更改,因为它不仅仅是接受.mixin而且#mixin我们必须接受任何mixin之类的标签/属性选择器input[type=text].

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

Answer 1

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

\n\n

问题不在于选择器或子规则的复杂性，而在于标签名称选择器部分（即 ）li。所以，我们必须修复的是 mixin 解析器只匹配类和 id。我想我们不想篡改第一个 class 或 id test，因为这可能需要区分 mixin 和正常的 CSS 规则（尽管测试在注释掉该检查的情况下运行良好）。（实际上，在操作中有一个解析器首选项，并且在混合后唯一尝试的是注释和指令，因此我们也可以安全地删除该检查）。然而，我们可以通过在 mixin 选择器后面添加一个问号来轻松允许标签名称出现在 mixin 选择器的后面部分[#.]然而，我们可以通过在匹配的正则表达式所以

\n\n

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

\n\n

\xe2\x80\x93 即第 825 行\xe2\x80\x93 变为

\n\n

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

\n\n

之后测试用例仍然运行良好，但可能会发生微妙的破坏，所以要小心。

\n\n

编辑：有一个针对同一问题的GitHub 问题。显然，较少的人宁愿希望 mixin 功能更加狭窄和类似函数，而不是允许更灵活的 \xe2\x80\xa6 以及 \xe2\x80\xa6 混合规则。对于 CSS 输出，这可能是合理的。

\n