# SASS compiler can't compile CSS grid template names

**URL:** <https://talk.jekyllrb.com/t/sass-compiler-cant-compile-css-grid-template-names/659>\
**Category:** Uncategorized\
**Created:** [June 15, 2017, 6:17pm UTC](https://talk.jekyllrb.com/t/sass-compiler-cant-compile-css-grid-template-names/659 "2017-06-15T18:17:40Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![scwewywabbit](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/scwewywabbit/32/272_2.png) [@scwewywabbit](https://talk.jekyllrb.com/u/scwewywabbit)\
**Post date:** [June 15, 2017, 6:17pm UTC](https://talk.jekyllrb.com/t/sass-compiler-cant-compile-css-grid-template-names/659/1 "2017-06-15T18:17:40Z")

</div>

I’m trying to use SASS to build a CSS Grid builder.

The SASS compiler doesn’t seem to like compiling CSS gridline template names like:

```auto
grid-template-rows: [row-start row-1-start] 1fr [row-1-end row-2-start] 1fr [row-2-end row-3-start] 1fr [row-3-end row-end];
grid-template-columns: [col-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-4-start] 1fr [col-5-start] 1fr [col-end];

```

These are just examples from [http://learncssgrid.com/](http://learncssgrid.com/)

Any thoughts?

---

<div class="post-metadata">

**Author:** ![alanaktion](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/alanaktion/32/295_2.png) [@alanaktion](https://talk.jekyllrb.com/u/alanaktion)\
**Post date:** [June 22, 2017, 3:33am UTC](https://talk.jekyllrb.com/t/sass-compiler-cant-compile-css-grid-template-names/659/2 "2017-06-22T03:33:27Z")

</div>

The addition of square brackets with named grid lines seems to be breaking a lot of CSS/SCSS parsers. I was able to work around this in Jekyll using the `unquote()` function. Something like this should work:

```nohighlight
grid-template-rows: unquote("[row-start row-1-start] 1fr [row-1-end row-2-start] 1fr [row-2-end row-3-start] 1fr [row-3-end row-end]");
grid-template-columns: unquote("[col-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-4-start] 1fr [col-5-start] 1fr [col-end]");

```