合并类似的SCSS类

我有两组48个类，它们都具有相似的结构，我想知道是否有一种优雅的方法可以将它们整合到SCS中

第一组遵循这种模式

它最多重复12列，每次宽度增加1/12。利润率保持不变。然后，12根立柱的整个结构重复4次，一次用于小型、小型、中型和大型。这里唯一的区别是类名

.largeOneColumn {
    width: calc(8.33% - #{$column-spacing}) !important;
    margin-left: $column-margins !important;
    margin-right: $column-margins !important;
}

这就是一个例子

第二盘是

.col-xsmall-offSet-12 {
    left: 100%;
  }
.col-xsmall-offSet-11 {
    left: 91.66%;
  }

相同的总体思路，递减为1，这会使

左：

每次减少1/12。然后在xsmall、small、medium、large上重复4次

我希望使用一些SCS使所有这些更加优雅和简洁，而不需要重复这么多代码

---

谢谢

使用SASS列表和循环的组合，您应该能够相当轻松地完成这项工作。如果需要，它们可以嵌套

---

我反复使用这些模式作为创建递增CSS的基础，就像您尝试做的那样。让我们知道它是如何运行的，或者您是否需要更多帮助。

使用SASS列表和循环的组合，您应该能够非常轻松地完成这项工作。如果需要，它们可以嵌套

---

我反复使用这些模式作为创建递增CSS的基础，就像您尝试做的那样。让我们知道进展如何，或者您是否需要更多帮助。

我认为foundation6有一些很酷的scss函数/混合函数，可以将列和内容设置得更漂亮。你可能会在他们的源代码中找到一些东西。我认为foundation6有一些很酷的scss函数/混合函数来设置列和更漂亮的东西。你可能会在他们的源代码中找到一些东西。