issue with grid-template-columns css rule

[gKreator]

When using

grid-template-columns: [avatar] 2fr [body] 6fr;

I get the fallowing error:

[exception] 500 | Internal Server Error | Leafo\ScssPhp\Exception\ParserException
[message] parse error: failed at grid-template-columns: [avatar] 2fr [body] 6fr; /usr/share/nginx/gb-portfolio/src/AppBundle/Resources/assets/scss/header.scss on line 14
[1] Leafo\ScssPhp\Exception\ParserException: parse error: failed at grid-template-columns: [avatar] 2fr [body] 6fr; /usr/share/nginx/gb-portfolio/src/AppBundle/Resources/assets/scss/header.scss on line 14
at n/a
in /usr/share/nginx/gb-portfolio/vendor/leafo/scssphp/src/Parser.php line 128
at Leafo\ScssPhp\Parser->throwParseError()

I'm hopping there is a way to at the least have the scss parser ignore it somehow?

Thanks

[GaryBer]

I got around it by using the fallowing:

$gtc: "[avatar] 2fr [body] 6fr"; grid-template-columns: #{$gtc};

I am assuming that this way the parser just reads this as a string and then echoes it out as a string after the parsing is complete, therefore not triggering the parser to trip up on the square brackets.

Also this is the shorthand version of that:
grid-template-columns: #{"[avatar] 2fr [body] 6fr"};

Hope that helps!

Edit: This trick will also work with rules like:
grid-column: 1 / -1;
being rendered as

grid-column: 1;

Just do:
grid-column: #{"1 / -1"};

[Cerdic]

Fixed with #697