Combine multiple bootstrap classes into one SASS class

Question

In a form I have rows of form-groups with each having a label and form-control element.

<div class="form-group row">
  <label class="col-xs-2 col-md-3">Text</label>
  <div class="col-xs-10 col-md-9">
    <input class="form-control" type="text">
  </div>
</div>

Labels use classes: 'col-xs-2 col-md-3' and form-controls: 'col-xs-10 col-md-9'

Is it possible to combine the two 'col' classes of the label element into one class in sass? Something like this:

.label-width{
   .col-xs-2
   .col-md-3
}

Giving me:

<label class="label-width">Text</label>

Which then I could control with a sass variable such as: '$labelColumnWidth: 2' to give me a quick way to set label widths for all rows. Something like this:

$labelColumnWidth: 2
.label-width{
   .col-xs-#{$labelColumnWidth}
   .col-md-#{$labelColumnWidth}
}

I would like to use the bootstrap classes for column spacing but able to control them with sass variables to quickly change the layout of the form. Possible?

Answer 1

you can extend multiple class using multiple way like:

Way 1

.my-class {
   @extend .class1;
   @extend .class2;
   .
   .
   .
   @extend .classn;
}

way 2

one another way is you can extend multiple class in an single line here example

.my-class {
   @extend #{'.class1', '.class2', ... , '.classn'}
}

Know more details: Sass official document

Thanks

Answer 2

Even though it is not a good practice, you should be able to do this via @extend. In your case, your code should look like this:

.label-width{
   @extend .col-xs-2
   @extend .col-md-3
}

Have a look here if you need more explanation.