Объединение Меньше mixin и calc()

Question

Я пытаюсь получить меньше mixin, чтобы объединить calc и переменную, но я продолжаю бить стену.

По существу, ячейка должна быть квадратной, что составляет 20% от высоты монитора минус навигационная панель 68 пикселей в нижней части страницы.

На странице будут элементы, которые будут иметь переменную ширину и высоту, исходя из ширины ячейки.

Итак, что-то может быть 3 клетки в ширину и 2 клетки высотой.

У меня есть это для моего Меньшего, но он терпит неудачу.

Мысли?

.cellSize(@x:1, @y:1) { 
 
    width: calc(~"((100vh - 68px) * .2)") * @x; 
 
    height: calc(~"((100vh - 68px) * .2)") * @y; 
 
    } 
 
    
 
    .cell { 
 
    .cellSize(1, 1); 
 
    display: block; 
 
    background: aqua; 
 
    }

Это даже вещь?

Answer 1

Меньше не имеет функции calc. Это функция CSS, и при использовании функции CSS calc все операции должны выполняться внутри фигурных скобок. Итак, ваш код должен быть следующим (если мое понимание верное).

.cellSize(@x:1, @y:1) { 
    width: calc(~"((100vh - 68px) * .2) * @{x}"); 
    height: calc(~"((100vh - 68px) * .2) * @{y}"); 
} 

@{x} и @{y} являются интерполяцией, которые бы подставить значение переменных в CSS calc функции. Поэтому входной код, как ниже

.cell1 {.cellSize(1, 1);} /* removed other stuff for brevity */ 
.cell2 {.cellSize(2, 1);} 

приведет следующий вывод:

.cell1 { 
    width: calc(((100vh - 68px) * .2) * 1); 
    height: calc(((100vh - 68px) * .2) * 1); 
} 
.cell2 { 
    width: calc(((100vh - 68px) * .2) * 2); 
    height: calc(((100vh - 68px) * .2) * 1); 
} 

---

Кроме того, как семь-фазы-макс упоминает в своем комментарии, ниже является более оптимизированный код потому что он перемещает часть вычисления в компилятор Less и уменьшает нагрузку на UA/CSS. .2 * @x и .2 * @y - простая математика, которая может выполняться компилятором Less во время самого компиляции.

.cellSize(@x:1, @y:1) { 
    width: calc(~"(100vh - 68px) *" .2 * @x); 
    height: calc(~"(100vh - 68px) *" .2 * @y); 
}