SCSS doesn't compile when naming lines in grid column

[inklingsofreality]

This repo is currently on low maintenance. See README for details

Problem

Building a theme using the starter theme and attempting to build it using a grid layout, but ran into an issue where theme.scss.liquid does not seem to compile when adding in the following code:

grid-template-columns: repeat(12, [col-start] 1fr);

If I remove the [col-start], the file compiles and displays fine.

Replication steps

How to replicate the problem. Screenshots or video?

In theme.liquid, I put the following:

<div class="wrapper">
    <a class="in-page-link visually-hidden skip-link" href="#MainContent">{{ 'general.accessibility.skip_to_content' | t }}</a>

    {% section 'header' %}

    <main role="main" id="MainContent" tabindex="-1">
      {{ content_for_layout }}
    </main>

    {% section 'footer' %}
  </div>

In my theme.scss.liquid, I put:

.wrapper {
    display: grid;
    grid-template-columns: repeat(12, [col-start] 1fr);
    grid-gap: 20px;
}

More Information

Any additional information which might be helpful.

I have run yarn lint and yarn format to see the issues, but only find issues with other files that I have now commented out. If there is something I'm missing and this is not a bug, I would like to know. Thank you.

[inklingsofreality]

This seems to be an issue with the SASS compiler in that the square brackets break it. I was able to solve this by doing the following:

grid-template-columns: repeat(12, unquote("[col-start] 1fr"));

This came from the following: http://talk.jekyllrb.com/t/sass-compiler-cant-compile-css-grid-template-names/659

Hopefully, this can help someone else unless the SASS compiler used by Slate Tools needs updating as well.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.