42

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

我看了一下 bootstrap 如何在他们的网格中使用 LESS 并且他们使用相同的方法；wherecolumn 1 etc将从column基类继承。这似乎又生成了很多 CSS。

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

4

2 回答 2

92

各种选项，没有设置答案

这在很大程度上取决于您的代码、您的目标等，以及您如何获得各种元素的样式。这里有一些可能性，每种都有优点和缺点。

1. Mixin（你目前在做什么）

较少的

.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 即将允许扩展 mixins，但目前（LESS 1.5）只需要一个类定义，所以：

较少的

.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，但它的缺点是它还需要两个类的额外 HTML 标记<input class="inputbase someInput" />等。

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

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

概括

什么是最好的取决于你所面临的特定情况。但也许这两个附加选项将帮助您思考您的案例。在大多数情况下，我个人会选择#2 或#4，但同样，也有#1 和#3 的应用程序。

于 2013-11-14T14:23:29.907 回答
0

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

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

于 2013-11-14T13:19:34.297 回答