Cacher is the code snippet organizer for pro developers

/*
 * Новая реализация.
 * Новая сетка по высоте/ширине элементов.
 * 
 * @param {object} params - включает в себя: шаг {number}, префикс {string}, css свойство {string}, !important {boolean}, debug {boolean}
 * @param {number} itr - количество итераций 
*/
.grid(@params, @itr) when (@itr > 0) {
  @col: @itr;
  @step: extract(@params, 1);
  @prefix: extract(@params, 2);
  @property: extract(@params, 3);
  @important: extract(@params, 4);
  @debug: extract(@params, 5);
  
  .grid-params__@{prefix} when (@debug) and (@col = 12) {
    col: @col;
    step: @step;
    prefix: @prefix;
    property: @property;
    important: @important;
    debug: @debug;
  }
  
  .grid(@params, (@itr - 1));
  .@{prefix}-@{col} when (@important) {
    @{property}: @step * @col !important;
  }
  .@{prefix}-@{col} when (@important = false) {
    @{property}: @step * @col;
  }

}

//Variables 
@par-height: 620px/12,  ~'row', ~'height', false, false;
@par-width: 100%/12,  ~'col-pr', ~'width', true, false;
@itr: 12; 

.grid(@par-height, @itr);
.print-page {
    .grid(@par-width, @itr);
}

@width: 620px;
@columns: 12;
@step: @width / @columns;

/*
 * @param {number} step - высота одного элемента
 * @param {number} counter - количество итераций
 * @param {string} class - класс ввиде префикса у элемента
 * @param {boolean} important - включает !important у свойства
 */

.grid(@step; @counter; @class; @important) when (@counter > 0) {
  .grid(@step; (@counter - 1); @class; @important );
  .@{class}-@{counter} when (@important = true){
    height: (@step * @counter) !important;
  }
  .@{class}-@{counter} when (@important = false){
    height: (@step * @counter);
  }
}

.grid(@step, @columns, ~'row', false);

$width = 100%;
$col = 12;
$step = $width / $col;


/*
 * @param {number} $step - высота/ширина одного элемента
 * @param {number} $col - количество итераций
 */
grid($step, $col) 
  for i in (1..$col)
    .col-{i} {
      width: $step * i
    }

grid($step, $col)

@step: 51.66666666666667px;

/*
 * @param {number} step - высота одного элемента
 * @param {number} counter - количество итераций
 */

.grid(@step; @counter) when (@counter > 0) {
  .grid(@step; (@counter - 1) );
  .row-@{counter} {
    height: (@step * @counter);
  }
}

.grid(@step, 12);