Combine multiple bootstrap classes into one SASS class
<p>In a form I have rows of form-groups with each having a label and form-control element. </p>

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

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

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

<pre><code>.label-width{
   .col-xs-2
   .col-md-3
}
</code></pre>

<p>Giving me:</p>

<pre><code>&lt;label class="label-width"&gt;Text&lt;/label&gt;
</code></pre>

<p>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:</p>

<pre><code>$labelColumnWidth: 2
.label-width{
   .col-xs-#{$labelColumnWidth}
   .col-md-#{$labelColumnWidth}
}
</code></pre>

<p>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?</p>