.unit(@units:1) {
  width: (@unitNarrowWidth + ((@units - 1) * (@unitNarrowWidth + @gridUnitGutter)));
}

.with-1-unit, .with-2-units, .with-3-units, .with-4-units, .with-5-units, .with-6-units, .with-7-units, .with-8-units, .with-9-units, .with-10-units, .with-11-units, .with-12-units, .with-13-units, .with-14-units, .with-15-units, .with-16-units, .with-17-units, .with-18-units, .with-19-units, .with-20-units, .with-21-units, .with-22-units, .with-23-units, .with-24-units {
  .column();
}

.with-1-unit { .unit(1); }
.with-2-units { .unit(2); }
.with-3-units { .unit(3); }
.with-4-units { .unit(4); }
.with-5-units { .unit(5); }
.with-6-units { .unit(6); }
.with-7-units { .unit(7); }
.with-8-units { .unit(8); }
.with-9-units { .unit(9); }
.with-10-units { .unit(10); }
.with-11-units { .unit(11); }
.with-12-units { .unit(12); }
.with-13-units { .unit(13); }
.with-14-units { .unit(14); }
.with-15-units { .unit(15); }
.with-16-units { .unit(16); }
.with-17-units { .unit(17); }
.with-18-units { .unit(18); }
.with-19-units { .unit(19); }
.with-20-units { .unit(20); }
.with-21-units { .unit(21); }
.with-22-units { .unit(22); }
.with-23-units { .unit(23); }
.with-24-units { .unit(24); }

.prefix(@units:1) {
  padding-left: (@units) * (@unitNarrowWidth + @gridUnitGutter);
}

.prefixed-by-1, .prefixed-by-2, .prefixed-by-3, .prefixed-by-4, .prefixed-by-5, .prefixed-by-6, .prefixed-by-7, .prefixed-by-8, .prefixed-by-9, .prefixed-by-10, .prefixed-by-11, .prefixed-by-12, .prefixed-by-13, .prefixed-by-14, .prefixed-by-15, .prefixed-by-16, .prefixed-by-17, .prefixed-by-18, .prefixed-by-19, .prefixed-by-20, .prefixed-by-21, .prefixed-by-22, .prefixed-by-23 {
  .column();
}

.prefixed-by-1 { .prefix(1); }
.prefixed-by-2 { .prefix(2); }
.prefixed-by-3 { .prefix(3); }
.prefixed-by-4 { .prefix(4); }
.prefixed-by-5 { .prefix(5); }
.prefixed-by-6 { .prefix(6); }
.prefixed-by-7 { .prefix(7); }
.prefixed-by-8 { .prefix(8); }
.prefixed-by-9 { .prefix(9); }
.prefixed-by-10 { .prefix(10); }
.prefixed-by-11 { .prefix(11); }
.prefixed-by-12 { .prefix(12); }
.prefixed-by-13 { .prefix(13); }
.prefixed-by-14 { .prefix(14); }
.prefixed-by-15 { .prefix(15); }
.prefixed-by-16 { .prefix(16); }
.prefixed-by-17 { .prefix(17); }
.prefixed-by-18 { .prefix(18); }
.prefixed-by-19 { .prefix(19); }
.prefixed-by-20 { .prefix(20); }
.prefixed-by-21 { .prefix(21); }
.prefixed-by-22 { .prefix(22); }
.prefixed-by-23 { .prefix(23); }

.suffix(@units:1) {
  padding-right: (@units) * (@unitNarrowWidth + @gridUnitGutter);
}

.suffixed-by-1, .suffixed-by-2, .suffixed-by-3, .suffixed-by-4, .suffixed-by-5, .suffixed-by-6, .suffixed-by-7, .suffixed-by-8, .suffixed-by-9, .suffixed-by-10, .suffixed-by-11, .suffixed-by-12, .suffixed-by-13, .suffixed-by-14, .suffixed-by-15, .suffixed-by-16, .suffixed-by-17, .suffixed-by-18, .suffixed-by-19, .suffixed-by-20, .suffixed-by-21, .suffixed-by-22, .suffixed-by-23 {
  .column();
}

.suffixed-by-1 { .suffix(1); }
.suffixed-by-2 { .suffix(2); }
.suffixed-by-3 { .suffix(3); }
.suffixed-by-4 { .suffix(4); }
.suffixed-by-5 { .suffix(5); }
.suffixed-by-6 { .suffix(6); }
.suffixed-by-7 { .suffix(7); }
.suffixed-by-8 { .suffix(8); }
.suffixed-by-9 { .suffix(9); }
.suffixed-by-10 { .suffix(10); }
.suffixed-by-11 { .suffix(11); }
.suffixed-by-12 { .suffix(12); }
.suffixed-by-13 { .suffix(13); }
.suffixed-by-14 { .suffix(14); }
.suffixed-by-15 { .suffix(15); }
.suffixed-by-16 { .suffix(16); }
.suffixed-by-17 { .suffix(17); }
.suffixed-by-18 { .suffix(18); }
.suffixed-by-19 { .suffix(19); }
.suffixed-by-20 { .suffix(20); }
.suffixed-by-21 { .suffix(21); }
.suffixed-by-22 { .suffix(22); }
.suffixed-by-23 { .suffix(23); }

.push(@units:1) {
  left: (@units) * (@unitNarrowWidth + @gridUnitGutter);
}

.pushed-by-1, .pushed-by-2, .pushed-by-3, .pushed-by-4, .pushed-by-5, .pushed-by-6, .pushed-by-7, .pushed-by-8, .pushed-by-9, .pushed-by-10, .pushed-by-11, .pushed-by-12, .pushed-by-13, .pushed-by-14, .pushed-by-15, .pushed-by-16, .pushed-by-17, .pushed-by-18, .pushed-by-19, .pushed-by-20, .pushed-by-21, .pushed-by-22, .pushed-by-23 {
  .column();
}

.pushed-by-1 { .push(1); }
.pushed-by-2 { .push(2); }
.pushed-by-3 { .push(3); }
.pushed-by-4 { .push(4); }
.pushed-by-5 { .push(5); }
.pushed-by-6 { .push(6); }
.pushed-by-7 { .push(7); }
.pushed-by-8 { .push(8); }
.pushed-by-9 { .push(9); }
.pushed-by-10 { .push(10); }
.pushed-by-11 { .push(11); }
.pushed-by-12 { .push(12); }
.pushed-by-13 { .push(13); }
.pushed-by-14 { .push(14); }
.pushed-by-15 { .push(15); }
.pushed-by-16 { .push(16); }
.pushed-by-17 { .push(17); }
.pushed-by-18 { .push(18); }
.pushed-by-19 { .push(19); }
.pushed-by-20 { .push(20); }
.pushed-by-21 { .push(21); }
.pushed-by-22 { .push(22); }
.pushed-by-23 { .push(23); }

.pull(@units:1) {
  right: (@units) * (@unitNarrowWidth + @gridUnitGutter);
}

.pulled-by-1, .pulled-by-2, .pulled-by-3, .pulled-by-4, .pulled-by-5, .pulled-by-6, .pulled-by-7, .pulled-by-8, .pulled-by-9, .pulled-by-10, .pulled-by-11, .pulled-by-12, .pulled-by-13, .pulled-by-14, .pulled-by-15, .pulled-by-16, .pulled-by-17, .pulled-by-18, .pulled-by-19, .pulled-by-20, .pulled-by-21, .pulled-by-22, .pulled-by-23 {
  .column();
}

.pulled-by-1 { .pull(1); }
.pulled-by-2 { .pull(2); }
.pulled-by-3 { .pull(3); }
.pulled-by-4 { .pull(4); }
.pulled-by-5 { .pull(5); }
.pulled-by-6 { .pull(6); }
.pulled-by-7 { .pull(7); }
.pulled-by-8 { .pull(8); }
.pulled-by-9 { .pull(9); }
.pulled-by-10 { .pull(10); }
.pulled-by-11 { .pull(11); }
.pulled-by-12 { .pull(12); }
.pulled-by-13 { .pull(13); }
.pulled-by-14 { .pull(14); }
.pulled-by-15 { .pull(15); }
.pulled-by-16 { .pull(16); }
.pulled-by-17 { .pull(17); }
.pulled-by-18 { .pull(18); }
.pulled-by-19 { .pull(19); }
.pulled-by-20 { .pull(20); }
.pulled-by-21 { .pull(21); }
.pulled-by-22 { .pull(22); }
.pulled-by-23 { .pull(23); }
