使用SASS节省创建类的时间

上周，我遇到了问题。

我需要在HTML中定义一个类，该类将根据最后一个字符给我空白。 但是最后一个字符并不总是相同，也没有要应用边距的地方。

我想要一个上边界为margin-top-1或下，左或右的类，最后一个数字为1到5 rem。

我已经在使用SCSS，但是我不知道该怎么做。

上帝知道我在寻找答案，但仍然找不到应该怎么做。

也许我用谷歌搜索错了，但现在我知道了答案，而且我不仅限于此。

现在我到处使用它。

让我们看看我是如何做到的。

如何使用SASS来创建包含变体的类，从而节省时间。

我们都去过那儿。 我们需要创建一个具有不同变体的类，以便可以在HTML中使用它们。 尽管SCSS可以为我们节省很多工作，但它仍然是重复的，仍然很无聊。

有时，避免重复任务的最佳方法是执行重复功能。

怎么样？ 你问。

通过@for指令。

因此，假设您需要定义一个CSS类以在HTML中使用一些变量。 假设您要定义class margin-（number），而该数字将是rem中的值。 像这样：

.margin-1 {
margin : 1rem ;
}

好吧，如果您只想定义.margin-1，则无需进行循环。 您可以像这样简单地编写它，但是，就本文而言，假设您要一直定义到100rem的边距。 这就是SAAS的优点。

您可以定义起点，终点和@for指令以迭代数字。

那么，让我们看看它的外观！

就是这样。 编译之后，就好像您已经编写了300多行代码。

就是这样。 编译之后，就好像您已经编写了300多行代码。

因为它太大了，所以不会在此处发布完整的CSS，但是如果不打开文本编辑器并自己尝试，则可以理解。

现在，您可以根据需要在HTML上使用margin类。

但是，如果我想定义顶部或底部或其他任何东西，该怎么办？

好吧，在这种情况下，您应该定义变量，并创建其他类。

仍可以使用相同的指令。

唯一的区别是您需要定义上，下，左，右和自动。 但最后，与我们上面所做的相同。 您可以将其用于所有内容。

在这里，您大约用30行代码编译了一个包含2000行以上的CSS文件。

可能性是无穷的，您可以将其与几乎所有属性（宽度，高度）一起使用。

玩得开心！

From: https://hackernoon.com/save-time-using-sass-to-create-classes-with-variations-yaeh2cly