更少的CSS、嵌套选择器和减少CSS膨胀的任务

虽然我知道有很多方法可以优化我处理过的CSS，但我正在尝试寻找一些奇特的方法来减少CSS膨胀，而不必依赖于其他人在我的CSS上的后拼凑扑克（AutoRefixer就足够了！）

我主要在预处理中使用较少的CSS，但我在试图弄清楚如何整合许多同样适用于嵌套继承的选择器时遇到了困难。有可能我想做的完全超出了LESS的范围，但我正在尝试，天哪，该死的

我的主要示例是在尝试迭代许多具有相似外观的输入元素变体时（例如，

文本

，

密码

，

电子邮件

，

url

，

电话

，等等）。然后，我想将一个规则集应用于合并选择器，该选择器还包含一些

&

内容（例如，设置输入状态的样式，如

：active

和

：hover

）

以下是我目前的实验状态（）：

示例1确实有效，但是它的输出过于膨胀（为了说明膨胀，对输出进行了简化）：

示例2/3非常不完整，影响了所有其他示例

在一个完美的实现中，它们的输出如下（简化以说明要点）：

有人知道“完美的实现”到底是什么样的吗

---

在95%的情况下，我更喜欢少一点SCS，但我发现SCS对于这种循环/嵌套的东西更友好一些。

听起来你需要一个新的解决方案。LESS等人不是为优化而设计的。将优化集成到编译器中真的会产生与作为后处理步骤进行优化不同的结果吗？我的想法是，虽然我可以使用CSS优化程序，但理想情况下，我会使用更少的代码（或其他类似的CSS预处理器语言）编写99.9%的优化代码。您最好使用更少的代码（据我所知）就是显式地编写一个伪选择器（或者从要迭代的选择器列表中选择一个），然后在循环中扩展这个选择器。是我意思的一个演示。天才，哈利。你能把它表述成我可以接受的答案吗？我已经尝试了

extend

功能，但它似乎仍然不能100%正常工作。也许有些事我只是不明白。。。

/*
 * Collect all the text inputs in a list to iterate over
 * (used in example 1 and 2)
 */
@text-inputs: text,
              number,
              email,
              tel,
              url,
              password,
              search,
              color,
              date,
              datetime,
              datetime-local,
              time,
              month,
              week;

/*
 * Collect all the text inputs in a single string
 * (no iteration needed; used in example 3)
 */
@all-text-inputs: ~'input[type=text],
                    input[type=number],
                    input[type=email],
                    input[type=tel],
                    input[type=url],
                    input[type=password],
                    input[type=search],
                    input[type=color],
                    input[type=date],
                    input[type=datetime],
                    input[type=datetime-local],
                    input[type=time],
                    input[type=month],
                    input[type=week]';

/*
 * Apply ruleset to all the text selectors (bloated)
 */
.text-inputs(@rules) {
  // Start the text input selector generation
  .-text-input(@i: length(@text-inputs)) when (@i > 0) {
    @text-input: extract(@text-inputs, @i);
    @selector: ~"input[type=@{text-input}]";

    @{selector} {
      @rules();
    }

    .-text-input((@i - 1));
  }

  .-text-input;
}

/*
 * Apply ruleset to all the text selectors in one consolidated selector
 */
.consolidate-text-inputs(@rules) {
  // Start the text input selector generation
  .-text-input(@i: length(@text-inputs)) when (@i > 0) {
    @text-input: extract(@text-inputs, @i);
    @selector: ~"input[type=@{text-input}]";
    .-text-input(@selector; (@i - 1));
  }

  // -- Append another text input selector
  .-text-input(@selector; @i) when (@i > 0) {
    @text-input: extract(@text-inputs, @i);
    @-selector: ~"@{selector}, input[type=@{text-input}]";
    .-text-input(@-selector; (@i - 1));
  }

  // -- Output the selector and the rules
  .-text-input(@selector; @i) when (@i = 0) {
    @{selector} {
      @rules();
    }
  }

  .-text-input;
}

// Works, but is bloated
.example-1 {
  .text-inputs({
    color: green;

    &:hover {
      background-color: yellow;
      color: blue;
    }

    &:focus,
    &:active {
      color: purple;
    }
  });
}

// Broken; overwrites all the other example CSS as well
.example-2 {
  .consolidate-text-inputs({
    color: red;

    &:hover {
      background-color: lightblue;
      color: purple;
    }

    &:focus,
    &:active {
      color: green;
    }
  });
}

// Broken; overwrites all the other examples as well
.example-3 {
  @{all-text-inputs} {
    color: orange;

    &:hover {
      background-color: lilac;
      color: blue;
    }

    &:focus,
    &:active {
      color: red;
    }
  }
}

.example-1 input[type=text] {
  ...
}
.example-1 input[type=number] {
  ...
}
.example-1 input[type=email] {
  ...
}
.example-1 input[type=...] {
  ...
}
.example-1 input[type=text]:hover {
  ...
}
.example-1 input[type=number]:hover {
  ...
}
.example-1 input[type=email]:hover {
  ...
}
.example-1 input[type=...]:hover {
  ...
}
.example-1 input[type=text]:focus,
.example-1 input[type=text]:active {
  ...
}
.example-1 input[type=number]:focus,
.example-1 input[type=number]:active {
  ...
}
.example-1 input[type=email]:focus,
.example-1 input[type=email]:active {
  ...
}
.example-1 input[type=...]:focus,
.example-1 input[type=...]:active {
  ...
}

.example-2 input[type=text],
.example-2 input[type=number],
.example-2 input[type=email],
.example-2 input[type=...] {
  ...
}

.example-2 input[type=text]:hover,
.example-2 input[type=number]:hover,
.example-2 input[type=email]:hover,
.example-2 input[type=...]:hover {
  ...
}

.example-2 input[type=text]:focus,
.example-2 input[type=text]:active,
.example-2 input[type=number]:focus,
.example-2 input[type=number]:active,
.example-2 input[type=email]:focus,
.example-2 input[type=email]:active,
.example-2 input[type=...]:focus,
.example-2 input[type=...]:active {
  ...
}