在LESS CSS中使用通用选择器作为混合 [英] Using a general purpose selector as a mixin in LESS CSS

问题描述

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

I know about mixins and parametric mixins. What we are looking for is a way to make any general purpose selectors in CSS / LESS into a mixin.

例如，在 Twitter BootStrap 中，我们有如果我必须在课堂上说.mynavbar，我希望能够做到这一点

If I have to use it in a class say .mynavbar I want to be able to do this

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

---

OUTPUT->
.mynavbar {
  float:left;
}

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

Now I know this can't be done with the current version of LESS as the compiler flags a parser error. I wanted someone to help me out on changing the source code of less.js a little so that this is workable.

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

I've managed to reach the source code for the mixin parser. I've tried changing the RegExp there, but it interferes with other parts of the parser. I know we have to make only a few changes because, instead of just accepting .mixin and #mixin we have to accept any mixin like tags / attribute selectors like input[type=text].

当前需要开发使用Bootstrap的UI框架.不幸的是，引导程序中的许多地方到处都是直接标记选择器，而不是ID和类.

It is currently needed for the development of a UI framework that uses Bootstrap. Unfortunately many places in bootstrap are littered with direct tag selectors instead of ids and classes.

推荐答案

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

First off, I would strongly discourage doing such things. Instead, try to use the power of CSS and build your HTML such that the bootstrap rules apply, for example. Anyway, since you asked for it, here is the solution.

问题不是选择器或子规则的复杂性，而是标签名称选择器部分(即li).因此，我们需要解决的是仅匹配类和ID的mixin解析器.我想我们不想篡改第一个class或id test ，，因为可能需要将mixin与常规CSS规则区分开(尽管测试运行良好，并且注释了该检查).(实际上，在其中存在解析器首选项操作，mixins之后唯一尝试的操作是注释和指令，因此我们也可以安全地删除该检查).但是，通过在匹配的正则表达式中的[#.]之后添加问号，我们可以轻松地在mixin选择器的后面部分中允许标记名称.所以

The problem is not the complexity of the selector, or the child rule, but the tag name selector part (i. e. the li). So, what we have to fix is the mixin parser only matching classes and ids. I guess we would not want to tamper with the first class or id test, since that is probably needed to distinguish mixins from normal CSS rules (although the tests run fine with that check commented out). (Actually, there is a parser preference in action, and the only thing tried after mixins are comments and directives, so we can safely remove that check as well). However, we can easily allow tag names in later parts of the mixin selector by adding a question mark after [#.] in the matching regular expression. So

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

– i. e. 第825行 –变成

– i. e. line 825 – becomes

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

此后，测试用例仍然可以正常运行，但是会发生细微的断裂，因此请保持谨慎.

The test cases still run through fine, afterwards, but subtle breakage my occur, so be cautious.

:有一个 GitHub问题对于相同的问题.显然，较少的人们宁愿混合功能更狭窄，更像函数，而不是允许规则的……灵活……混合.关于CSS输出，这可能是合理的.

There is a GitHub Issue for the same problem. Apparently the less folks rather want the mixin feature to be more narrow and function-like, instead of allowing a more flexible … well … mixing in of rules. With regard to the CSS output, that's probably reasonable.

这篇关于在LESS CSS中使用通用选择器作为混合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！