将多个引导类合并为一个SASS类

Question

在表单中，我有多个表单组行，每个行都有一个标签和表单控制元素。

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

标签使用类：“ col-xs-2 col-md-3”和表单控件：“ col-xs-10 col-md-9”

是否可以将label元素的两个“ col”类组合为sass中的一个类？像这样：

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

给我：

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

然后，我可以使用诸如$$ ColumnColumnWidth：2这样的sass变量进行控制，从而为我提供一种快速设置所有行的标签宽度的方法。像这样：

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

我想将bootstrap类用于列间距，但能够使用sass变量控制它们，以快速更改表单的布局。可能？

Answer 1

您可以使用多种方式扩展多个类，例如：

方式一

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

方式2

另一种方法是您可以在此处的示例中在一行中扩展多个类

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

了解更多细节：Sass官方文档

谢谢

Answer 2

即使这不是一个好习惯，您也可以通过进行操作@extend，这意味着您的代码应如下所示：

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

如果需要更多说明，请看这里。