如何避免重复多个 CSS 类

Question

由于 bootstrap3，我的很多 html 最终都会变成这样：

<div class="form-group">
    <label class="control-label col-xs-4 col-sm-6">Name on card</label>
    <div class="col-xs-8 col-sm-6">
        <input class="form-control" type="text" placeholder="Name on Card" required />
    </div>
</div>
<div class="form-group">
    <label class="control-label col-xs-4 col-sm-6">Card Number</label>
    <div class="col-xs-8 col-sm-6">
        <input class="form-control" type="text" placeholder="Card Number" name="EWAY_CARDNUMBER" required value="4444333322221111" />
    </div>
</div>

见上面的代码，label节点针对不同的媒体屏幕有多个类。我想简单地使用我自己的类来缩短它们。

我试图更少地创建一个从多个类扩展的类，例如

my-control-label:extend(.control-label, .col-xs-4, col-sm-6){}

但这不起作用，因为对于上面的示例，less 使用了完全匹配。是的，我可以尝试扩展“全部”，如下所示：

my-control-label:extend(.control-label all, .col-xs-4 all, col-sm-6 all){}

但是很烦人，而且会炸掉生成的css。

那么有什么简单的方法可以避免这种重复吗？

谢谢， 罗恩

更新 #1：

即使 extend all 也不适用于我的情况

HTML

<div id='finalise'>
  <form class='form-horizontal'>
    <div class='form-group' >
      <label class='my-label' />
      <div class='my-controls'>
        <input class="form-control" type="text" placeholder="Name on Card" required />
      </div>

      ...
    </div>
  </form>
</div>

减：

#finalise {
    .my-label:extend(.control-label all, .col-xs-4 all, .col-sm-3 all, .col-lg-2 all){}
    .my-controls:extend(.control-label all, .col-xs-8 all, .col-sm-5 all, .col-lg-4 all){}
}

生成的css：

@media (min-width: 768px) {
  .form-horizontal .control-label,
  .form-horizontal #finalise .label,
  .form-horizontal #finalise .controls {
    text-align: right;
  }
}

看到第 3 行不会应用 html 节点，这就是它不起作用的原因。

有什么建议吗？

更新 #2： 虽然将多个类组合成一个自定义类并不是一种通用方法，但它解决了这个问题。它使用引导网格混合解决了这个问题。谢谢 NiloVelez

HTML

<div id='finalise'>
  <form class='form-horizontal'>
    <div class='form-group' >
      <label class='control-label' />
      <div class='controls'>
        <input class="form-control" type="text" placeholder="Name on Card" required />
      </div>

      ...
    </div>
  </form>
</div>

减：

#finalise {
    .form-group {
    .make-row();
}
.control-label {
    .make-xs-column(4);
    .make-sm-column(5);
    .make-lg-column(6);
}
.controls {
    .make-xs-column(8);
    .make-sm-column(5);
    .make-lg-column(6);
}
}

Answer 1

您必须自己解决问题，但 Bootstrap 带有 LESS mixin，旨在减少由负责任的网格列引起的选择器膨胀

http://getbootstrap.com/css/#grid-less

你可以做这样的事情（来自文档）

.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}

...

<div class="wrapper">
  <div class="content-main">...</div>
  <div class="content-secondary">...</div>
</div>

---

更新： Bootstrap 现在提供了更多关于它的 LESS mixins 的文档：

http://getbootstrap.com/css/#less-mixins-vendor

http://getbootstrap.com/css/#less-mixins-utility