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

2023年2月4日 328次阅读

在表单中,我有一些表单组,每个表单组都有一个标签和表单控件元素.

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

最佳答案 即使这不是一个好习惯,你也应该能够通过@extend来做到这一点,这意味着在你的情况下你的代码应该是这样的：

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

如果您需要更多解释,请查看here.

点赞