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'

是否可以将标签元素的两个'col'类合并到sass中的一个类中？像这样：

.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变量控制它们以快速更改表单的布局。可能的？

Answer 1

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

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

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

Answer 2

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

方式一

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

方式 2

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

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

了解更多详情：Sass official document

谢谢

将多个引导类组合到一个SASS类中

2 个答案:

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