Css 将多个引导类合并到一个SASS类中

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

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

给我：

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

---

我想使用bootstrap类来设置列间距，但可以使用sass变量来控制它们，从而快速更改表单的布局。可能吗？

即使这不是一个好的做法，您也应该能够通过

@extend

来实现这一点，这意味着在您的情况下，您的代码应该如下所示：

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

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

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

---

如果需要更多解释，请查看。

尝试我得到的上述解决方案：“.label width”未能@extend.col-sm-3”，选择器“.col-sm-3”找不到。显然，

@extend

在类位于同一指令中时起作用：为什么这是一种不好的做法？只是想知道，如果有很多地方是以内容为中心的，您可以创建一个类，如

.myCenter{@extend.d-flex@extend.flex column@extend.justify content center}

然后您将拥有一个看起来更好的可重用类practice@Sam我相信有些人认为这是不好的做法，因为它经常被粗心地使用，然后会产生额外的、意想不到的规则。然而，这并不是单方面的坏习惯，您只需要知道它是如何工作的，以便最有效地使用它：