10

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

例如在Twitter BootStrap中，我们有

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

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

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

OUTPUT->
.mynavbar {
  float:left;
}

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

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

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

4

2 回答 2

4

这是可能的，因为包含该功能的 LESS版本 1.4.0 (2013-06-05) 。extend基于原始示例

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

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

编译为

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

此处的文档以及此处用于原始问题的讨论和示例

编辑：添加代码示例

于 2014-12-28T15:23:51.130 回答
2

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

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

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

– 即第 825 行– 变为

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

之后，测试用例仍然可以正常运行，但是会发生细微的损坏，所以要小心。

编辑：同样的问题有一个GitHub问题。显然，较少的人宁愿希望 mixin 功能更加狭窄和类似功能，而不是允许更灵活的……嗯……混合规则。关于 CSS 输出，这可能是合理的。

于 2012-11-26T08:13:01.247 回答