Question

我有一个inputbase(){}类的LESS文件。我经常使用它，但不是每种输入类型。当我编译时，我在输出的CSS文件中有很多重复的样式。

我看了一下bootstrap如何使用LESS为他们的网格，他们使用相同的方法;其中column 1 etc将从column基类继承。这似乎再次产生了很多CSS。

我应该在每个.inputbase .specificClass中使用<input />而不是使用LESS继承吗？

Answer 1

各种选项，未设置答案

这将取决于你的代码，你的目标等，你如何获得各种元素的风格。这里有一些可能性，每种都有优点和缺点。

<强> 1。 Mixin（你现在做的）

LESS

.inputbase() {
  /* your base code */
}

.someInput {
  .inputbase;
  /*some input special code */
}

.someOtherInput {
  .inputbase;
  /*some other input special code */
}

.andAnotherInput {
  .inputbase;
  /*and another input special code */
}

CSS输出

.someInput {
  /* your base code */

  /*some input special code */  
}
.someOtherInput {
  /* your base code */

  /*some other input special code */    
}
.andAnotherInput {
  /* your base code */

  /*and another input special code */    
}

如果.inputbase()中的代码不止一行或两行，并且如果它混合的不仅仅是几个实例，那么这将产生大量额外的代码。这是你遇到的问题。

<强> 2。扩展课程

它似乎LESS is just about ready to allow for extending mixins，但目前（LESS 1.5）这只需要一个类定义，所以这个：

LESS

.inputbase {
  /* your base code */
}

.someInput {
  &:extend(.inputbase);
  /*some input special code */
}

.someOtherInput {
  &:extend(.inputbase);
  /*some other input special code */
}

.andAnotherInput {
  &:extend(.inputbase);
  /*and another input special code */
}

CSS输出

.inputbase, /* this is gone once mixin extending allows .inputbase() extension */
.someInput,
.someOtherInput,
.andAnotherInput {
  /* your base code */   
}
.someInput {
  /*some input special code */    
}
.someOtherInput {
  /*some other input special code */   
}
.andAnotherInput {
  /*and another input special code */   
}

优点是所有基本代码都不重复，但重复的是选择器，因为它们首先与基本代码组合在一起，然后再输出单个代码。如果一个人喜欢将他们的代码保存在一个选择器定义中，那么这就不可能了。否则，这提供了一种减少CSS输出的好方法。

第3。两个类（你建议的额外html标记）

你提出的这个解决方案有两个类（这是因为你声明你并不总是希望.inputbase应用于输入元素。）

LESS和CSS输出 *

.inputbase {
  /* your base code */
}

.someInput {
  /*some input special code */
}

.someOtherInput {
  /*some other input special code */
}

.andAnotherInput {
  /*and another input special code */
}

这个CSS的数量最少，但它的缺点是它还需要两个类<input class="inputbase someInput" />等的额外HTML标记。

<强> 4。一个覆盖基数的类

这可能比上述更好。

LESS和CSS输出

input {
  /* your base code */
}

.someInput {
  /*some input special code */
  /*override input base code if needed */
}

.someOtherInput {
  /*some other input special code */
  /*no override if not needed */
}

.andAnotherInput {
  /*and another input special code */
  /*no override if not needed */
}

如果大多数输入都有baseinput代码，您只需在input元素定义中定义基本输入代码，然后在您的特殊css代码中覆盖您不需要的属性。只允许应用单个类<input class="someInput" />，这样可以减少html。这将使CSS和HTML不会变得混乱，但缺点是记住基本代码是什么，并且如果需要可以覆盖它。

摘要

什么最佳过分依赖于您所面临的特定情况。但也许这两个额外的选项将帮助您思考案例。在大多数情况下，我个人会选择＃2或＃4，但同样也有＃1和＃3的应用程序。

Answer 2

首先，它似乎取决于您使用的Less版本。看看https://github.com/twbs/bootstrap/issues/8947。首先，它已被确定为一个错误。在这种情况下，您可以选择等待错误修复或更改代码。

稍后将讨论它是否是一个bug。括号的不同使用会产生不同的结果。关于与类同名的mixin也会出现问题，另请参阅：https://github.com/less/less.js/issues/1437

少：最好使用继承或多个类

2 个答案:

各种选项，未设置答案

摘要