LESS generates wrong code for grid-template declaration with forward slashes

user_4684797 0
Viewed 290

I am using this CSS for my CSS grid declaration:

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

but it converts to:

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

in my LESS, and the page view breaks.

You can check it here:

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

Where can I report it, if it is a bug? And is there a workaround?

css-grid less css
3 Answers

The problem is that LESS thinks this is a mathematical operation.

For example if you write:

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

Then it will output:

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

You can make use of escaping to workaround the problem:

Escaping allows you to use any arbitrary string as property or variable value. Anything inside ~"anything" or ~'anything' is used as is with no changes except interpolation.

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

Feels like a bug in LESS, you can use this workaround:

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

the e function will just strip the parentheses from a variable

user_119561070

As mentioned in another answer, this is a bug with LESS, where the forward slash is interpreted as a division slash (see the report).

So instead of using the grid-template shorthand property:

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

Just stick to the longhand properties:

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