LESS генерирует неправильный код для объявления шаблона сетки с косой чертой

Question

Я использую это CSS для моего CSS объявления сетки:

#slider_area {
  grid-template: 1fr 1fr 1fr / 1fr 32%;
  grid-column-gap: 8px;
  grid-row-gap: 4px;
}

, но оно конвертируется в:

#slider_area {
    grid-template: 1fr 1fr 1fr 32%;
    grid-column-gap: 8px;
    grid-row-gap: 4px;
}

в моем LESS, и просмотр страницы прерывается .

Вы можете проверить это здесь:

https://www.webtoolkitonline.com/less-to-css.html

Где я могу сообщить об этом, если это ошибка? И есть ли обходной путь?

Answer 1

Похоже на ошибку в LESS, вы можете использовать этот обходной путь:

#slider_area {
  @grid-template: "1fr 1fr 1fr / 1fr 32%";
  grid-template: e(@grid-template);
  grid-column-gap: 8px;
  grid-row-gap: 4px;
}

функция e просто удалит скобки из переменной

Answer 2

Проблема в том, что LESS считает, что это математическая операция.

Например, если вы напишите:

#slider_area #A { grid-area: 1 / 2 / 1 / 2; }

Затем будет выведено:

#slider_area #A { grid-area: 0.25; }

Вы можете использовать , экранируя , чтобы обойти задача:

Экранирование позволяет использовать любую произвольную строку в качестве значения свойства или переменной. Все, что находится внутри ~ "что-нибудь" или ~ "что-нибудь", используется без изменений, кроме интерполяции.

#slider_area {
  grid-template: ~"1fr 1fr 1fr / 1fr 32%";
  grid-column-gap: 8px;
  grid-row-gap: 4px;
}

Answer 3

Как уже упоминалось в другом ответе , это ошибка в LESS, где форвард sla sh интерпретируется как деление sla sh ( см. Отчет ).

Таким образом, вместо использования свойства grid-template:

grid-template: 1fr 1fr 1fr / 1fr 32%;

Просто придерживайтесь свойств:

grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 32%;