html – 如何避免重复多个css类

由于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 @R_@R_944_11239@_10793@er</label>
    <div class="col-xs-8 col-sm-6">
        <input class="form-control" type="text" placeholder="Card @R_@R_944_11239@_10793@er" name="EWAY_CARD@R_@R_944_11239@_10793@ER" required value="4444333322221111" />
    </div>
</div>

参见上面的代码,标签节点有不同媒体屏幕的多个类.我想简单地用自己的课来缩短他们的课程.

我试图减少创建一个从多个类延伸的类

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

但是,这不行,因为较少的使用完全匹配上面的例子.是的,我可以尝试扩展“所有”,如下所示：

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

但这是令人讨厌的,它会吹动生成的css.

那么有什么容易的方式来避免这样的重复？

谢谢,
罗恩

更新#1：

甚至延伸一切都不适用于我的情况

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

看到第三行将不会应用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);
}
}

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