How avoid duplicating multiple css classes

Question

Because of bootstrap3, lots of my html will end up like this:

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

See the above code, the label node has multiple classes for different media screens. And I want to simply them using my own class to shorten them.

I am trying to less to create a class which extends from multiple classes like

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

But that doesn't work, because less uses exact match for the above example. Yes I could try to extend "all" like the following:

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

But it is annoying, and it will blow the generated css.

So is there any easy way to avoid such duplication?

Thanks, Ron

Update #1:

Even extend all doesn't work for my case

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>

Less:

#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){}
}

Generated css:

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

See the 3rd line will not apply the the html node, that's why it doesn't work.

Any suggestions?

Update #2: Though it is not a generic way to combine several classes into a custom one, but it solved this problem. It uses bootstrap grid mixins solved this problem. Thanks 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>

Less:

#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

You'll have to work out your own case, but Bootstrap's comes with LESS mixins intented to reduce the selector bloat caused by responsible grid columns

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

You can make things like this (from the docs)

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

---

Update: Bootstrap offers some more documentation on it's LESS mixins now:

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

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