将多个引导类组合到一个SASS类中-Java 学习之路

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

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

1 回答

2
虽然这不是一个好习惯，但您应该可以通过 @extend 执行此操作，这意味着在您的情况下，您的代码应如下所示：
```
.label-width{
   @extend .col-xs-2
   @extend .col-md-3
}
```
如果您需要更多解释，请查看here .
回复于 2024-05-04T14:06:01+08:00

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

1 回答

相关问题