Named CSS Grid areas with Stylus

I recently started learning the new CSS Grids, and I love it! If you don’t know what CSS Grids are yet, you have to watch this talk by Morten Rand Hendriksen and this one by Rachel Andrew. They’re great, and I found them to be enough to start experimenting with grids.

CSS Grids bring a little bit of new syntax with them, and because currently I prefer to use Stylus as my preprocessor – I ran into this issue:

Cannot read property 'clone' of undefined

That sounds a little bit mysterious, but it’s caused by grid-template-columns

For example, when doing this:

grid-template-columns: [x-start] 1fr [x-end]

Stylus doesn’t like those brackets. There is an open Github issue about this, and I posted this simple workaround there:

b(val) //b for bracket
   unquote("[") + val + unquote("]")

And while doing something like this does work:

grid-template-columns: b(desc-start) 1fr b(thumb-start) 4rem b(desc-end) 1fr b(thumb-end)

To me, it still looks kind of ugly.

So this is what I came up with:

desc-start = b(desc-start)
desc-end = b(desc-end)
thumb-start = b(thumb-start)
thumb-end = b(thumb-end)

grid-template-columns: desc-start 1fr thumb-start 4rem desc-end 1fr thumb-end
grid-template-rows: thumb-start 1rem desc-start 1fr desc-end 1rem thumb-end

On top of being cleaner, PHPStorm recognizes variable names and makes them pretty with syntax highlighting.

And another added bonus – you can define a few named areas in a config stylus file, and then reuse them across your styles.
I’m not sure whether that’ll work for me, but that’s an option if I need one.

For now, I’ll probably keep the grid area name variables in the top of the file where I use them, that should be concise enough. I hope the bug gets fixed soon, but until then – this isn’t all that bad either.