Автоматизированная функциональность маржи в CSS, а не в JS

Question

У меня есть функция, написанная на jQuery, которая автоматизирует margin-bottom или же padding-bottom (условно) стола. По сути, это сводит на нет эффект границ ячеек таблицы, толкающих страницу вниз, сохраняя вертикальный ритм без изменений. Вместо того, чтобы использовать JS для этого, я считаю, что я должен иметь возможность использовать Less и CSS вместо этого.

Условие (оператор if) основано на количестве строк (и, следовательно, границ, плюс еще одна) в таблице. Поскольку мое " магическое число" равно 24 (24px - это вертикальная единица ритма), если таблица имеет (0,11)∪(24,35)∪… границы, функция сделает margin-bottom отрицательный и потяните остальную часть страницы вверх. Однако, если таблица имеет (12,23)∪(36,47)∪… границ, она добавит к padding-bottom, нажимая на остальную часть страницы до следующего вертикального ритм-блока. Все это работает в предположении, что каждая горизонтальная граница в таблице равна 1px. Дополнительный кредит, если вы можете обобщить шаблон для работы для более толстых границ.

Вот моя функция в jQuery:

/*
Algorithm:
for each table:
take the number of rows (x)
add 12
mod 24
subtract 12
negate.
function notation: g(x) = -(f(x+12)-12) where f(x) = MOD(x,24)
function transformation: MOD(x,24) translated left 12 and down 12, then flipped over the x-axis.
if g(x) <= 0, then margin-bottom that number
else, padding-bottom that number.
*/
$('table').each(function () {
    var n_rows = 0;
    $(this).find('tr').each(function () {
        n_rows++;
    });
    n_rows++; // once more for the last border
    var btm = -(((n_rows + 12) % 24) - 12);
    if (btm <= 0) {$(this).css('margin-bottom',btm);}
    else          {$(this).css('padding-bottom',btm);}
});

Вот что у меня есть в моем Меньше:

table {
    counter-reset: nrows;
    tr {
        counter-increment: nrows;
    }
    counter-increment: nrows; // once more for the last border
//  @btm: -(((nrows + 12) % 24) - 12);
//  if (@btm <= 0) {
//      margin-bottom: @btm;
//  } else {
//      padding-bottom: @btm;
//  }
}

Помоги мне здесь?

Answer 1

Если я хорошо понимаю ваш вопрос, вы можете использовать псевдокласс nth-child.

Меньше

.childern(@i){
.margins(@i) when (@i > 0) and (@i < @number/2) {
.margins((@i - 1));
tr:nth-child(@{number}n+@{i})
{
margin-bottom: ~"-@{i}px";
}
}
.margins(@i) when (@i > (@number/2-1)) {
.margins((@i - 1));
tr:nth-child(@{number}n+@{i})
{
padding-bottom: unit(@number - @i,px);
}
}
.margins(@i);
}
table {
.childern(@number);
}
@number: 24;

Приведенный выше код Less будет скомпилирован в код CSS следующим образом:

table tr:nth-child( 24n + 1) {
  margin-bottom: -1px;
}
table tr:nth-child( 24n + 2) {
  margin-bottom: -2px;
}
table tr:nth-child( 24n + 3) {
  margin-bottom: -3px;
}
table tr:nth-child( 24n + 4) {
  margin-bottom: -4px;
}
table tr:nth-child( 24n + 5) {
  margin-bottom: -5px;
}
table tr:nth-child( 24n + 6) {
  margin-bottom: -6px;
}
table tr:nth-child( 24n + 7) {
  margin-bottom: -7px;
}
table tr:nth-child( 24n + 8) {
  margin-bottom: -8px;
}
table tr:nth-child( 24n + 9) {
  margin-bottom: -9px;
}
table tr:nth-child( 24n + 10) {
  margin-bottom: -10px;
}
table tr:nth-child( 24n + 11) {
  margin-bottom: -11px;
}
table tr:nth-child( 24n + 12) {
  padding-bottom: 12px;
}
table tr:nth-child( 24n + 13) {
  padding-bottom: 11px;
}
table tr:nth-child( 24n + 14) {
  padding-bottom: 10px;
}
table tr:nth-child( 24n + 15) {
  padding-bottom: 9px;
}
table tr:nth-child( 24n + 16) {
  padding-bottom: 8px;
}
table tr:nth-child( 24n + 17) {
  padding-bottom: 7px;
}
table tr:nth-child( 24n + 18) {
  padding-bottom: 6px;
}
table tr:nth-child( 24n + 19) {
  padding-bottom: 5px;
}
table tr:nth-child( 24n + 20) {
  padding-bottom: 4px;
}
table tr:nth-child( 24n + 21) {
  padding-bottom: 3px;
}
table tr:nth-child( 24n + 22) {
  padding-bottom: 2px;
}
table tr:nth-child( 24n + 23) {
  padding-bottom: 1px;
}
table tr:nth-child( 24n + 24) {
  padding-bottom: 0px;
}