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

Posted 2023-03-06

【中文标题】将多个引导类合并为一个 SASS 类

【英文标题】：Combine multiple bootstrap classes into one SASS class

【发布时间】：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 变量控制它们以快速更改表单的布局。可能吗？

【参考方案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

谢谢