合并类似的SCSS类

Question

我有两组48个类都有相似的结构，我想知道是否有一种优雅的方式来巩固它们在SCSS中。

第一组遵循这种模式

重复到十二列，每次宽度增加1/12。利润率保持不变。然后整个十二列的结构重复4次，一次用于xsmall，小，中，大。这里唯一的区别是类名，所以

.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，每次减少left: 1/12。然后在xsmall，small，medium，large上重复4次。

我希望使用一些SCSS来使所有这些更加优雅和浓缩，而不是需要重复这么多代码。

谢谢！

Answer 1

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

https://hugogiraudel.com/2013/07/15/understanding-sass-lists/

http://thesassway.com/intermediate/if-for-each-while

我已经反复使用这些模式作为创建增量CSS的基础，就像你想要的那样。请告诉我们它是如何进行的，或者您是否需要更多帮助。