合併類似的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。讓我們知道它是怎麼回事，或者如果你需要更多的幫助。