Объедините похожие классы SCSS. ⇐ CSS

[Anonymous]

У меня есть два набора из 48 классов, которые имеют схожую структуру, и мне интересно, существует ли элегантный способ объединить их в SCSS.
Первый набор следует следующему шаблону:
Он повторяется до двенадцати столбцов, каждый раз ширина увеличивается на 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, что уменьшает left: на 1/12 каждый раз. Затем повторяется четыре раза для xsmall, small, medium, big.
Как я могу использовать SCSS, чтобы сделать все это более элегантным и сжатым, вместо того, чтобы повторять так много кода?

Подробнее здесь: https://stackoverflow.com/questions/447 ... ss-classes