css - 将多个 Bootstrap 类合并为一个 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'

是否可以在 sass 中将标签元素的两个“col”类合并为一个类？像这样:

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

给我:

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

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

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

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

Answer 1

尽管这不是一个好的做法，但您应该能够通过 @extend 来完成此操作。在您的情况下，您的代码应如下所示:

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

看看here如果您需要更多解释。