如何在 SCSS 中将多个类组合成一个类？答案

【问题标题】：How can I combine multiple classes into a single one in SCSS?如何在 SCSS 中将多个类组合成一个类？
【发布时间】：2017-12-18 01:29:51
【问题描述】：

在 Bootstrap 中，有一个最酷的功能，我可以像这样指定填充和边距。

<div class="py-10 mt-5">...</div>

我在我的每一个整页组件上都使用了那个精确的 div 类组合。然后让我感到如果我必须重新调整空间，我将不得不更新每一个这样的东西，这需要大量的工作并且容易出错。

当然，我可以像这样声明自己的类。

div.full-page {
  padding: 10px 0;
  margin-top: 5px;
}

但是，它的缺点是与 Bootstrap 设置的间距/大小无关。另外，我的印象是，如果我让 Booty 以 Booty 式的方式完成工作，响应性和适应性将自动呈现。我也很好奇，这可能也是一个学习新东西的机会。

我想将两个类效果（py-10 和 mt-5）组合成一个新类，然后将该新类应用到我的 div 上。

有可能吗？如果可以，怎么做？

NB - 谷歌搜索“组合”和“类”会呈现很多关于面向对象技术的链接。在这种情况下，我不确定要谷歌搜索什么，所以我的预研究是有限的。（不是因为懒惰和cansomeoneelsedoitforme-ism，而是因为对关键词的无知和有限的幻想。）

【问题讨论】：

【解决方案1】：

首先，正如我在评论中提到的，values for those classes go from 0-5，没有 py-10。您可以使用引导文件：

这是参考： https://v4-alpha.getbootstrap.com/utilities/spacing/

找到您需要的类并复制它们的 CSS 样式并将它们添加到您自己命名的类中：

.py-5 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

.mt-5 {
  margin-top: 3rem !important;
}

您可以通过假设的名称创建一个类：pymt-5

.pymt-5{
margin-top: 3rem !important;
padding-top: 3rem !important;
padding-bottom: 3rem !important;
}

【讨论】：

谢谢。至于 py-10，这是一个错字。我没有从我的 IDE 中复制代码 - 只是输入了它应该如何工作的 idea。现在，对于主要问题 - 我理解你的建议，并想知道这是否是唯一的方法。 IE。是我的实际问题“no”的答案吗？如 - 不，你不能像这样组合类，你只能组合它的定义？太糟糕了 - 我希望能够参与课程以及何时/如果它们发生变化，我会在不需要重新编码我的源代码的情况下支持这些变化。
@DonkeyBanana 好吧，它是一个框架并且它是固定的（直到您修改原始文件）。如果您确实需要同时访问它们，则必须包含两个类名。而且，如果您只是想通过不手动定义它们来将它们组合到一个新类中，我想 javascript 可能是要走的路。但是每次你需要一些东西时动态地创建一个新类会很麻烦。最好的方法是两个原样包含它们。