Сетка-шаблон-столбцы меньше

Question

Я пытаюсь создать сетку в CSS, но использую .less

У меня есть

.item-view-component{
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: [grid-col-first] 20% [grid-col-2] 20% [grid-col-3] 20% [grid-col-4] 20% [grid-col-last] 20%;
    grid-template-rows: [grid-row-first] 20% [grid-row-2] 20% [grid-row-3] 20% [grid-row-4] 20% [grid-row-last] 20%;
}

К сожалению, я не могу найти способ правильно назвать мои столбцы и строки.

возвращает ошибку компиляции.

Answer 1

Вы можете использовать переменные и функцию e () - (она не меняет содержимое, она только удаляет кавычки):

@gridcolumns: "[grid-col-first] 20% [grid-col-2] 20% [grid-col-3] 20% [grid-col-4] 20% [grid-col-last] 20%";
@gridrows: "[grid-row-first] 20% [grid-row-2] 20% [grid-row-3] 20% [grid-row-4] 20% [grid-row-last] 20%";
.item-view-component{
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: e(@gridcolumns);
    grid-template-rows: e(@gridrows);
}