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?

d_z90 d_z90 · Accepted Answer · 2016-11-30T16:12:37

Even though it is not a good practice, you should be able to do this via @extend, which means that 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.

Combine multiple bootstrap classes into one SASS class

1 Answers