如何在SCSS中将多个类合并为一个类？

Question

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

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

我在我的每个完整页面组件上都使用了那个精确的div类组合。然后它告诉我，如果我必须重新调整，我将不得不更新每个这样的东西，这是很多工作和容易出错。

当然，我可以这样宣布我自己的课程。

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

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

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

有可能，如果可能，怎么样？

NB - 谷歌搜索“结合”和“类”提供了许多关于面向对象技术的链接。我不确定在这种情况下谷歌会是什么，所以我的预研究是有限的。 （不是由于懒惰和cansomeoneelsedoitforme-ism，但由于无知的关键字和有限的幻想。）

Answer 1

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

https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css

这是参考：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;
}