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

【问题标题】：Combine multiple bootstrap classes into one SASS class将多个引导类合并为一个 SASS 类
【发布时间】：2017-04-15 00:54:12
【问题描述】：

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

<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 中将 label 元素的两个 '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}
}

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

【问题讨论】：

标签： css twitter-bootstrap sass

【解决方案1】：

即使这不是一个好的做法，您也应该可以通过@extend 执行此操作。在您的情况下，您的代码应如下所示：

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

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

【讨论】：

尝试上述解决方案我得到：“.label-width”无法@extend“.col-sm-3”，找不到选择器“.col-sm-3”。跨度>
显然@extend 在类位于同一指令中时有效：sass-lang.com/documentation/…
为什么这是不好的做法？
只是想知道，如果有很多地方将内容置于中心位置，您可以创建一个像 .myCenter{ @extend .d-flex @extend .flex-column @extend .justify-content-center } 这样的类，然后您将拥有一个可重用的类，这似乎是更好的做法
@Sam 我相信有些人认为这是不好的做法，因为它经常被不小心使用，然后会创建额外的、意想不到的规则。然而，这并不是单方面的坏习惯，你只需要知道它是如何工作的才能最有效地使用它：smashingmagazine.com/2015/05/extending-in-sass-without-mess

【解决方案2】：

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

方式 1

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

方式 2

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

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

了解更多详情：Sass official document

谢谢

【讨论】：