Question

虽然我知道PostCSS以及它有很多方法来优化我处理过的CSS，但我正试图寻找一些奇特的方法来减少我在LESS中的CSS膨胀，而不必依赖一些魔法在我的CSS上使用其他人的jiggery-pokery（autoprefixer就够了！）。

我主要使用LESS CSS进行预处理，但是我有一个棘手的时间试图弄清楚如何合并一些也适用于嵌套继承的选择器。我试图做的事情可能完全超出了LESS的范围，但我正在努力，天哪。但

我的主要示例是尝试迭代多个具有相似外观的输入元素变体（例如text，password，email，url，{ {1}}等）。然后，我想将规则集应用于整合的选择器，该选择器还包含一些tel内容（例如，设置输入状态，如&和:active）。

这是我目前的实验状态（view in codepen）：

:hover

示例1肯定有效，但它的输出是膨胀的（输出已被简化以说明膨胀）：

/*
 * 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;
    }
  }
}

示例2/3如此破碎，它们会影响所有其他示例。

在一个完美的实现中，他们的输出就像（简化以说明一点）：

.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 {
  ...
}

任何人都有任何想法，确切地说“完美实施”可能是什么？

我更喜欢SCSS 95％的东西，但我发现SCSS对于这种循环/嵌套的东西更友好。

较少的CSS，嵌套的选择器，以及减少CSS膨胀的任务

0 个答案: