合并类似的SCSS类

Question

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

第一组遵循该图案

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

它重复最多12列，每次宽度由1/12上升。利润率保持不变。然后，十二列的整个结构重复四次，一次用于小型，中型和大型。这里唯一的区别是类名所以

.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减少left:。然后在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。让我们知道它是怎么回事，或者如果你需要更多的帮助。